黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 二 [打印本页]

---

作者: 我是楠楠    时间: 2020-1-8 15:11
标题: 【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 二

【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 二

1.3 用户登录前端
1.3.1 需求分析
点击用户登录固定跳转到用户中心前端的登录页面，如下：

输入账号和密码，登录成功，跳转到首页。
用户中心前端（xc-ui-pc-learning工程）提供登录页面，所有子系统连接到此页面。
说明：
页面有“登录|注册”链接的前端系统有：门户系统、搜索系统、用户中心。
本小节修改门户系统的页头，其它三处可参考门户修改。
1.3.2 Api方法
进入xc-ui-pc-learning工程定义api方法，在base模块下定义login.js。

[AppleScript] 纯文本查看 复制代码

/*登陆*/

export const login = params => {

//let loginRequest = querystring.stringify(params)

let loginRequest = qs.stringify(params);

return http.requestPostForm('/openapi/auth/userlogin',loginRequest);

}

1.3.3 页面
1、登录页面
进入用户中心前端，找到登录页面loginpage.vue：


2、路由配置
在home模块配置路由：

[AppleScript] 纯文本查看 复制代码

 import Home from '@/module/home/page/home.vue';

import Login from '@/module/home/page/loginpage.vue';

import Denied from '@/module/home/page/denied.vue';

import Logout from '@/module/home/page/logout.vue';

import order_pay from '@/module/order/page/order_pay.vue';

export default [{

path: '/',

component: Home,

name: '个人中心',

hidden: true

},

{

path: '/login',

component: Login,

name: 'Login',

hidden: true

},

..... 

3、登录后跳转
请求登录页面需携带returnUrl参数，要求此参数使用Base64编码。
登录成功后将跳转到returnUrl，loginForm.vue组件的登录方法如下：

[AppleScript] 纯文本查看 复制代码

 login: function () {

this.$refs.loginForm.validate((valid) => {

if (valid) {

this.editLoading = true;

let para = Object.assign({}, this.loginForm);

loginApi.login(para).then((res) => {

this.editLoading = false;

if(res.success){

this.$message('登陆成功');

//刷新 当前页面

// alert(this.returnUrl)

console.log(this.returnUrl)

if(this.returnUrl!='undefined' && this.returnUrl!=''

&& !this.returnUrl.includes("/userlogout")

&& !this.returnUrl.includes("/userlogin")){

window.location.href = this.returnUrl;

}else{

//跳转到首页

window.location.href = 'http://www.xuecheng.com/'

}

}else{

if(res.message){

this.$message.error(res.message);

}else{

this.$message.error('登陆失败');

}

}

},

(res) => {

this.editLoading = false;

});

}

});

},

1.3.5 点击登录页面
在门户的页头点击“登录|注册”连接到用户中心的登录页面，并且携带returnUrl。
修改门户的header.html，代码如下：

[AppleScript] 纯文本查看 复制代码

 <a href="javascript:;" @click="showlogin" v‐if="logined == false">登陆 | 注册</a>

showlogin: function(){

//this.loginFormVisible = true;

window.location = "http://ucenter.xuecheng.com/#/login?returnUrl="+

Base64.encode(window.location)

}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2