應(yīng)用場景

甲方現(xiàn)有平臺(tái)系統(tǒng)擬集成我方新開發(fā)系統(tǒng)，實(shí)現(xiàn)單點(diǎn)登錄功能，即用戶登錄主平臺(tái)后，無需重復(fù)登錄即可無縫訪問新系統(tǒng)，提升用戶體驗(yàn)與操作效率。

解決方案

實(shí)現(xiàn)代碼

前端

Step:1 新建ssoLogin.vue頁面

<template><div></div>
</template><script>
export default {name: "SSOLogin",data() {return {loading: false,redirect: undefined,};},watch: {},created() {// 第三方平臺(tái)登錄this.getLoginByToken();},methods: {// 第三方平臺(tái)單點(diǎn)登錄系統(tǒng)getLoginByToken() {//獲取地址欄中的tokenvar token = this.$route.query.token;//調(diào)用登錄的接口if (token == "" || token == undefined || token == null) {// 無token，跳轉(zhuǎn)到登錄頁面this.$router.push({ path: "/login" }).catch(() => {});} else {// 第三方平臺(tái)單點(diǎn)登錄系統(tǒng)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中，實(shí)現(xiàn)LoginByToken

import { login, logout, getInfo, loginByToken } from '@/api/login'// 通過token單點(diǎn)登錄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中，實(shí)現(xiàn)loginByToken方法

// 通過token單點(diǎn)登錄
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']