Online studies - Day 17 - Lecture - User Authentication Zuul two

1.3  user logs on the front 
1.3.1  Requirements Analysis 
click on the user logs on fixed jump to the front of the center of the user login page, as follows:
 
enter the account number and password, the login is successful, jump to the home page. 
User Center front-end ( XC-ui-PC-Learning Project) provide the login page, all subsystems connected to this page. 
Description: The 
page has a " Login | Register " front-end system links are: the portal system, search system, user-centered. 
This section header is modified portal system, three other portals can refer to modifications. 
1.3.2 Api method 
into the xc-ui-pc-learning project definition api method, the base module definition 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  page 
1 , the login page 
to enter the center of the front end user to find the login page loginpage.vue :

 
2 , routing configuration 
in the home configuration routing module:

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 , log Jump 
request login page must carry returnUrl parameters, this parameter requires the use Base64 encoding. 
After a successful login Jump to returnUrl , loginForm.vue assembly login as follows:

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  Click on the login page 
click on the portal page header " Login | Register " to connect to the login page user-centric, and carry returnUrl . 
Modified portal the header.html , code is as follows:

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