Vue 第三方调用若依系统实现系统单点登录
应用场景
甲方现有平台系统拟集成我方新开发系统,实现单点登录功能,即用户登录主平台后,无需重复登录即可无缝访问新系统,提升用户体验与操作效率。
解决方案
实现代码
前端
Step:1 新建ssoLogin.vue页面
<template>
<div></div>
</template>
<script>
export default {
name: "SSOLogin",
data() {
return {
loading: false,
redirect: undefined,
};
},
watch: {},
created() {
// 第三方平台登录
this.getLoginByToken();
},
methods: {
// 第三方平台单点登录系统
getLoginByToken() {
//获取地址栏中的token
var token = this.$route.query.token;
//调用登录的接口
if (token == "" || token == undefined || token == null) {
// 无token,跳转到登录页面
this.$router.push({ path: "/login" }).catch(() => {});
} else {
// 第三方平台单点登录系统
this.loading = true;
var loginInfo = {
token: token,
};
this.$store
.dispatch("LoginByToken", loginInfo)
.then((res) => {
this.$message.success("登录成功");
this.loading = false;
//获取用户信息
let roleName = res.data.roleName;
if (roleName === "user") {
sessionStorage.setItem("SSORoleName", roleName);
}
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch((err) => {
console.log("登录失败", err);
//异常信息
this.loading = false;
});
}
},
},
};
</script>
Step:2 在store->modules的user.js中,实现LoginByToken
import { login, logout, getInfo, loginByToken } from '@/api/login'
// 通过token单点登录
LoginByToken({ commit }, userInfo) {
const token = userInfo.token;
return new Promise((resolve, reject) => {
loginByToken({ token: token }).then(res => {
setToken(res.token)
commit('SET_TOKEN', res.token)
resolve()
})
}).catch(error => {
reject(error)
})
},
Step:3 在api目录的login.js中,实现loginByToken方法
// 通过token单点登录
export function loginByToken(token) {
return request({
url: '/ssoLogin',
method: 'post',
params: token
})
}
Step:4 在router的index.js中,添加如下路由:
{
path: '/ssoLogin',
component: () => import('@/views/ssoLogin'),
hidden: true
},
Step:5 在src的permission.js中,修改白名单如下:
const whiteList = ['/login', '/register', '/ssoLogin']