vue项目中的单点登录
要实现单点登录,集成项目和跳转目标项目分别要怎么做?一、集成项目的代码页面html代码:添加handleRoute()方法<div class="content"><divclass="content-box text-center"v-for="(item, index) in appList":key="index":style=
·
要实现单点登录,集成项目和跳转目标项目分别要怎么做?
一、集成项目的代码
页面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)
},
更多推荐
已为社区贡献7条内容
所有评论(0)