单点登录

xxx单点登录

整个流程首先是在xxx门户吊起我们的平台，我们需要提供触发单点登录的界面，当打开我们的页面时，需要重定向到xxx，随后xxx会返回我们token，我们用token登录即可。

进入页面重定向：

 onMounted(() => {
      redirectUrl();
 });
 const redirectUrl = () => {
      const ssoUrl = window.__config["rtc"].ssoUrl ?? "";
      let authToken = route.query.authToken;
      if (authToken != null && authToken != undefined) {
        console.log("拿到token ==== ", authToken);
        loginRequest(authToken);
      } else {
        console.log("重定向到xxx");
        window.open(ssoUrl, "_self");
      }
  };

其中重定向的URL(不同的平台可能不一样，以xxx提供的为准)：

"ssoUrl": "http://159.1.41.87:8080/DNP/syncSession?sysNo=ME2&targetUrl=http%3A%2F159.1.72.68%3A80%sso"

拿到token后，调用登录接口：

const loginRequest = async (authToken) => {
      try {
        const res = await getSsoRequestData({
          authToken,
        });
        const { code, data, msg } = res.data;
        if (code == "0") {
          const { user, token, userInfo } = data;
          user.token = token;
          store.commit("setToken", token);
          storage.setUserInfo(user);
          storage.setMenuCodes(userInfo.menuCodes);
          storage.setMenuInfos(userInfo.menuInfos).then(() => {
            addRouteFun(router);
            nextTick(() => {
              router.push({
                path: "/statisticalReport",
              });
              loading.value = false;
            });
          });
        } else {
          // ElMessage.error(msg);

          nextTick(() => {
            router.replace({
              path: "/login",
            });
            loading.value = false;
          });
        }
      } catch (e) {
        console.log(e);
        loading.value = false;
      }
    };

全部代码：

<template>
  <div v-loading="loading"></div>
</template>

<script>
import { useStore } from "vuex";
import storage from "../../api/storage";
import { useRouter, useRoute } from "vue-router";
import { getSsoRequestData } from "@/services/sso";
import { addRouteFun } from "@/router/addRoute.js";
import { ref, onMounted, reactive, toRefs, nextTick } from "vue";
// import { ElMessage } from "element-plus";

export default {
  name: "sso",
  components: {},
  setup() {
    const loading = ref(true);
    const store = useStore();
    let router = useRouter();
    let route = useRoute();
    onMounted(() => {
      redirectUrl();
    });
    const redirectUrl = () => {
      const ssoUrl = window.__config["rtc"].ssoUrl ?? "";
      let authToken = route.query.authToken;
      if (authToken != null && authToken != undefined) {
        console.log("拿到token ==== ", authToken);
        loginRequest(authToken);
      } else {
        console.log("重定向到xxx");
        window.open(ssoUrl, "_self");
      }
    };
    const loginRequest = async (authToken) => {
      try {
        const res = await getSsoRequestData({
          authToken,
        });
        const { code, data, msg } = res.data;
        if (code == "0") {
          const { user, token, userInfo } = data;
          user.token = token;
          store.commit("setToken", token);
          storage.setUserInfo(user);
          storage.setMenuCodes(userInfo.menuCodes);
          storage.setMenuInfos(userInfo.menuInfos).then(() => {
            addRouteFun(router);
            nextTick(() => {
              router.push({
                path: "/statisticalReport",
              });
              loading.value = false;
            });
          });
        } else {
          // ElMessage.error(msg);

          nextTick(() => {
            router.replace({
              path: "/login",
            });
            loading.value = false;
          });
        }
      } catch (e) {
        console.log(e);
        loading.value = false;
      }
    };

    return {
      loading,
    };
  },
};
</script>
<style lang="less" scoped>
</style>

js接口：

import ssoRequest from "../home";
import config from "@/config"

const api = new ssoRequest();
const baseUrl = config.newHost
export const getSsoRequestData = (params) => {
    return api.request({
        url: baseUrl + '/xhb/login',
        method: "get",
        params
    });
}

路由中代码：

{
      path: '/sso',
      name: 'sso',
      component: () => import('@/views/sso/index.vue')
    },