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() {//获取地址栏中的tokenvar 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']