オンラインの研究 - 17日目 - 講義 - ユーザ認証Zuul 2

1.3  前面にユーザがログイン 
1.3.1  要求分析 
として、以下の、ユーザのログイン・ページの中央の前面に固定ジャンプユーザーがログオンをクリックしてください：
 
口座番号とパスワードを入力し、ログインが成功すると、ホームページにジャンプ。 
ユーザーセンターフロントエンド（XC-UI-PC-ラーニングプロジェクト）は、ログインページ、このページに接続されているすべてのサブシステムを提供しています。 
説明： 
ページが持っている「ログイン| 登録」リンクがあり、フロントエンドシステム：ポータルシステム、検索システムを、ユーザー中心。 
このセクションヘッダーは、ポータルシステムを変更され、他の三つのポータルは修正を参照することができます。 
1.3.2のAPI メソッド 
へのXC-UI-PC-学習プロジェクト定義のAPI メソッド、ベースモジュール定義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を設定し、ルーティング、 
中に自宅のルーティングモジュールの構成：

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