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']