Vue单点登录笔记

_小郑有点困了

已于 2023-04-25 09:31:18 修改

阅读量692

点赞数 1

分类专栏： vue 文章标签： vue.js 笔记 javascript

于 2023-04-25 09:21:56 首次发布

本文链接：https://blog.csdn.net/qq_44706619/article/details/130357231

版权

vue 专栏收录该内容

81 篇文章 5 订阅

订阅专栏

功能背景

因项目需要类似于微软应用一样，单点登录。于是乎有了一丁点研究，我这里用的是OKTA登录。

功能原理

1、首先从地址栏输入url之后（或者点击url），那么直接进入单点登录逻辑处理页面。
2、进入该页面之后，判断本地是否存储了OKTA登录返回的code：
如果有，直接调用校验code接口；
如果没有直接调用接口获取OKTA登录链接，然后window.location.href跳转过去进行目标登录，登陆完成会重定向回项目url。
3、那么此时需要进行路由拦截，配置路由黑名单。
如果是url携带有code等关键参数，直接截取存储，跳转到OKTA登陆页面进行校验code，即第2条
4、如果是黑名单之外的路由，等同于普通进入页面操作，直接进入相应页面

代码实现

oktaLogin.vue

async created() {  
        const that = this
        const accessToken = this.$store.getters.accessToken
  
        if (accessToken) {
            let res = await executeOktaLogin({code:accessToken})
            if(res.success){
                that.$store.commit('saveUserData', res.data.datas)
                that.$store.commit('saveAccessToken', '')
                that.$store.commit('saveToken', res.data.accessToken)
                that.$store.commit('saveTokenType', res.data.tokenType)
                setTimeout(()=>{
                  let path = window.sessionStorage.targetPath?window.sessionStorage.targetPath:'/home'
                  that.$router.replace(path)
                },500)
            }else{
                that.$store.commit('saveAccessToken', '')
                that.$message.error(res.message)
                that.$router.replace('/403')
            }
        } else {
            let res = await getOktaLoginUrl()
            if(res.success){
                window.localStorage.setItem('ExpiresTime','999999999999999999999999999999999')
                window.location.href = res.data||res.message
            }else{
                this.$message(res.message)
                this.$router.replace('/403')
            }
        }
      },

路由拦截

router.beforeEach((to, from, next) => {
    // 路由名单
    const offpath = ['/login','/oktaLogin', '/404','/403']
 
    if ((window.location.href.split('=')[0]).includes('?code')) {
        const paths = window.location.href
        const pathsA = paths.split('=')[1]
        const pathsB = pathsA.split('&')[0]
        store.commit('saveAccessToken', pathsB)
        let host = window.location.origin
        let pathName = window.location.pathname
        window.location.href = host+pathName+'#'+'oktaLogin'        
    }
    //正常流程
    else if(offpath.indexOf(to.path) < 0){
        //还需要判断token
        const token = store.getters.token
        //保存最初的路由供okta登陆回来跳转使用
        window.sessionStorage.setItem('targetPath',to.path.toString())
        if(token){
            //页面权限判断首页
            next()
        }else{
            Message.error('Please login first');
            next('/login')
        }
    }
    else{
        next()
    }
})