学成在线-第17天-讲义-用户认证 Zuul 二

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

/*登陆*/
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模块配置路由：

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组件的登录方法如下：

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，代码如下：

<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)
}