前端单点登录

 单点登录系统的前端方案大概分为两种，一种是使用cookies实现的，一种是使用iframe的postMessage实现的，这两种的区别在于cookies的方案适用于要做登录的几个系统的主域名是一样的。postMessage方案可以是不一样的。

我要做的几个系统之间的的主域名是相同的，所以我使用了cookies的方案实现。

cookies可以设置二级域名共享cookies，比如a.test.com 和b.test.com如果想要共享cookies的话可以设置

Cookies.set("userInfo", encodeUserInfo, {

        path: "",

        domain: ‘test.com’,

      });

1.首先就是再单点登录后进行cookies设置，

      let cookiesDomine = "test.com";/*  */

     //设置cookies

      Cookies.set("userInfo", encodeUserInfo, {

        path: "",

        domain: cookiesDomine,

      });

      //从url上获取登陆后该跳回的地址

      let query = window.location?.href?.split("?");

      let params = query.length > 0 ? query[1] : "";

      let paramsArr = params?.split("=") || "";

      let paramsUrl = paramsArr.length > 0 ? paramsArr[1] : "";

      console.log(paramsUrl, "paramsUrl");

      if (paramsUrl) {

        window.location.href = decodeURIComponent(paramsUrl);

      }

2.再其他跳转过来的系统的app.vue的mounted方法里

通过cookies获取存储的token信息

import Cookies from "js-cookie";

let cookiesDomin = import.meta.env.VITE_COOKIES_DOMIN;

onMounted(() => {

  let userInfo = Cookies.get("userInfo");

  if (userInfo) {

    // debugger;

    localStorage.setItem("userInfo", userInfo);

  } else {

    localStorage.setItem("userInfo", "");

  }

});

3.再需要跳转单点登录的系统里的axios的请求拦截中加入跳转单点登录的逻辑

request.interceptors.response.use(

  (response) => {

    console.log("333", response.data);

    if (response.data.returnCode !== "000000") {

      message.error(response.data.returnMessage);

      if (response.data.returnCode === "000009") {

       

        toLogin()

      }

    }

    return response.data;

  },

  (error) => {

    console.log("status不是200的时候", error);

    return Promise.reject(error);

  }

);

toLogin是定义在util里面的方法

export const toLogin = (url?: string) => {

  //登录跳转

  let localtion = url ? url : window.location.href;

  console.log(VITE_SINGLE_LOGIN_URL + encodeURIComponent(localtion));

  debugger;

  window.location.href = VITE_SINGLE_LOGIN_URL + encodeURIComponent(localtion);

};