- 类似于登录淘宝或者天猫跳转到统一登录页面,登录成功携带参数跳转页面
- 需求:多个后台管理系统 => 未登录 => 跳转到统一登录界面 => 登录成功携带token => 需要登录系统截取token添加到请求头 => 请求参数展示页面
- 首先单独开发一个统一登录的功能
<template>
<div class="login">
<h1>欢迎来到某某集团后台管理系统</h1>
<!-- 账号登录 -->
<div class="loginPwd" v-else-if="show_login===2">
<el-input placeholder="请输入内容" v-model="inputAccount">
<template slot="prepend">账号</template>
</el-input>
<el-input placeholder="请输入内容" v-model="inputPwd">
<template slot="prepend">密码</template>
</el-input>
<el-button type="primary" @click="loginAccount">登录</el-button>
</div>
</section>
</div>
</template>
<script>
import { loginTf } from "../api/login";
export default {
name: "Login",
data() {
return {
redirectUrl: "", // 登录成功以后跳转相应系统的页面
inputAccount: "", // 账号
inputPwd: "", // 密码
};
},
created() {
// redirect是获取哪个系统域名 比如:http://127.0.0.1:8080 方便登录成功以后跳转相应的系统
if (window.location.href.indexOf("redirect") >= 0) {
//如果url中包含redirect split?分割成数组,取第二个
let redirect = window.location.href.split("?")[1];
redirect = redirect.substring(9); // 截取字符串第9位开始截取到最后
this.redirectUrl =redirect
}
},
methods: {
// 账号登录模式 可添加扫码 手机号码登录
loginAccount() {
if (!this.inputPwd && !this.inputAccount) {
this.$message.error("请输入账号和密码");
} else if (!this.inputPwd) {
this.$message.error("请输入密码再登录");
} else if (!this.inputAccount) {
this.$message.error("请输入账号再登录");
} else {
// 以下请求登录接口,成功返回token 当然需要判断是否符合登录要求,正则来表示,省略
loginTf({ userName: this.inputAccount, pwd: this.inputPwd })
.then(res => {
console.log(res);
if (res.b === 1) {
// 获取成功渲染数据 a代表数组 o代表单个数据
let token = res.o;
localStorage.setItem("token", token);
// 登录成功携带token以后跳转相应的系统,相应的系统截取token即可
window.location.href = this.redirectUrl+'?'+'token='+token
} else {
// 没有成功做相应的事情
}
})
.catch(msg => {
// this.$message({ message: '系统异常', type: 'error', center: true });
});
}
},
};
</script>
<style lang="less" scoped>
// 登录界面自己样式
</style>
4.首先需要在其全局前置守卫中判断是否有token。
router.beforeEach((to, from, next) => {
if (window.location.href.indexOf('token') >= 0) { // 如果token存在
//如果url中包含token split?分割成数组,取第二个
let token = window.location.href.split('?')[1];
let urlNoToken = window.location.href.split('?')[0]
token = token.substring(6); // 截取字符串第6位开始截取指导&出现截取成功
// 截取成功储存token,下面重定向时会在请求时再获取token添加到头部的
localStorage.setItem('token', token);
// 重定向地址去除url当中一大长串的token
window.location.href= urlNoToken
next();
} else {
if ( localStorage.getItem('token')){
next();
}
if (to.path === '/login') { // 如果是登录页移除token,token过期在请求相应时再判断
localStorage.removeItem('token');
}
if (!localStorage.getItem('token') && to.path !== '/login') { // 如果token不存在 并且 不是mylogin页面
next({ path: '/login' });
} else {
next();
}
}
if (to.meta.title) {
document.title = to.meta.title;
}
});
5.第二在其对应的系统首页判断用户是否登录过或者过期
<template>
<div class="login">
<section class="title">
<a href="javascript:void(0)" onclick="location.reload()" class="logo"></a>
<h1>欢迎来到某某管理系统</h1>
</section>
<div @click="loginMe">
<el-button type="primary" class="loginLg">你还未登录,请登录</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
created() {
},
methods: {
loginMe(){
console.log(window.location.href);
// 如果没有登录,跳转统一登录页面 带上重定向的参数 当然登录有登录自己的状态
// 先获取当前域名 let myUrl = window.location.href
window.location.href='统一登录的域名'+'?'+'redirect='+"当前系统的域名myUrl "
},
},
};
</script>
<style lang="less" scoped>
</style>