实现单点登录

需求：用户登录系统的方式有两种（根据用户权限呈现给用户登陆方式），一种是正常的本系统登录界面，还有一种是单点登录，即需要跳转到别人的登录界面去登录后再跳转回来进入系统。

分析:  通过接口前端获取当前用户需要的登录方式，然后在路由拦截里进行判断,详细判断逻辑见下文~

1.在src文件夹下新建permission.js文件（命名自定义）

import router from './router'
import store from './store'
import { JsLogin } from './api/login'
const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/view']
router.beforeEach((to, from, next)=>{
    if (getToken()) {
        if (to.path === '/login') {
            next({ path: '/' })
        } else {
            //在确定拉取完用户信息后可以进行操作
            store.dispatch('GetInfo').then(res => {
            }).catch(err => {
                store.dispatch('LogOut').then(() => {
                    next({ path: '/' })
                })
            })
        }
    }else{
        // 没有token
        if (whiteList.indexOf(to.path) !== -1){ // 在免登录白名单，直接进入
            next()
        }else{
            //通过接口获取当前用户需要的登录方式
            store.dispatch('getLoginType').then(()=>{
                if (store.state.user.loginType == '1'){//默认系统自身的登录方式
                    next(`/login?redirect=${to.fullPath}`)//跳转到系统自己的登录页面
                }else{//单点登录
                    const urlSearch = new URLSearchParams(window.location.search)
                    const code = urlSearch.get('code')//获取单点登录跳转过来携带的参数
                    if (code){
                        JsLogin({ code: code }).then(res=>{//通过获取的code换取token再保存到本系统
                             
                        })
                    }else{//跳转到三方登录页面
                        window.location.href = `http://59.20.19.16/k5a/realms/dev/protocol/openid-connect/auth?response_type=code&client_id=skxxpt&redirect_uri=http://59.203.198.112:18088/czyzt-v2/index.html&state=5a1f1776-792d-4ffd-b8d2-d2817d5e9582&login=true&scope=openid`
                    }
                    next()
                }
            })
        }
    }
})
router.afterEach(() => {})

 2.main.js里引入permission.js文件即可