vue项目中的单点登录

要实现单点登录，集成项目和跳转目标项目分别要怎么做？

一、集成项目的代码

页面html代码：添加handleRoute()方法

        <div class="content">
          <div 
            class="content-box text-center"
            v-for="(item, index) in appList"
            :key="index"
            :style="`background-color:${item.appCss}`"
            @click="handleRoute(item)"
          >
            <p class="radius">
              <i :class="item.appImg"></i>
            </p>
            <p>{{item.appName}}</p>
          </div>
        </div>

页面js代码：以下代码没判断token是否过期，建议先判断。

import aes from "@/utils/aes"
    
  handleRoute(item){
       let tokenData = {
        accessToken: this.$store.state.user.token,
        expires: getExpires() //获取token过期时间
      }
        //aes加密
      this.tokenEncrypt = encodeURIComponent(aes.AESEncrypt(JSON.stringify(tokenData)))
      if (item.appUrl) {
        //跳转到你设定的appUrl跳转地址，携带加密后的token参数
        //假设此时的item.appUrl是 'http://192.168.0.1:8080/ssoLogin'
        window.open(`${item.appUrl}?token=${this.tokenEncrypt}`, '_blank');
      }else{
        this.$message.warning('暂未开通')
      }
    },

aes.js:

import CryptoJS from 'crypto-js'
export default {
  //加密 AES
  AESEncrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : '4pQME1iaig+BZylP'
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var srcs = CryptoJS.enc.Utf8.parse(word)
    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return encrypted.toString()
  },
  //解密 AES
  AESDecrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : '4pQME1iaig+BZylP'
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return CryptoJS.enc.Utf8.stringify(decrypt).toString()
  }
}

二、跳转的项目代码

1、在路由的router.beforeEach(async (to, from, next) => {})方法中进行判断。

import aes from "@/utils/aes"
import store from '@/store'

router.beforeEach(async (to, from, next) => {
  // 中台跳转
  if (to.path === '/ssoLogin') {
    const _aestoken = to.query.token
    if (_aestoken) {
       //aes解密
      const _tokenObj = JSON.parse(aes.AESDecrypt(decodeURIComponent(_aestoken)))
       //刷新令牌
      await store.dispatch('user/setNewTokenInfo', _tokenObj) 
    }
    next({ path: '/' })
    return
  } 

  const hasToken = getToken()
  if (hasToken) {
    ...//根据项目自行添加
  }else{
    ...//根据项目自行添加
  }

})

2、刷新令牌方法

  // 刷新令牌
  setNewTokenInfo({
    commit
  }, info) {
    const {
      accessToken,
      expires
    } = info
    setToken(accessToken);
    setExpires(expires);
    //设置token 和 有效期
    commit('SET_TOKEN', accessToken)
    commit('SET_TOKENEXPIRES', expires)
  },