vue单点登录的实现方式sso之以code换token

单点登录概念

什么是单点登录？简单地说就是在多系统应用中，用户只需在一个地方登录，就可以访问所有的系统应用；

比如某宝，就属于多系统平台，既有买家购物系统、交易支付系统，还有卖家店铺管理系统、流量统计系统等等，如果没有单点登录，很简单的跨系统场景：假如有一个用户既是买家又是卖家，用户从卖家系统登录后，如果想要去购物，就要再次登录买家购物系统，支付的时候再登录一次交易支付系统，用户是不是该emo了？如果有了单点登录，用户只需在其中某个系统登录一次，其他系统也自动登录，退出也是一次退出则全退出；

比如，某猫和某宝我们很明显知道这是两个系统，但你在某猫登录以后，某宝也会自动登录，这就是单点登录的一种；

可以看作是有一个授权中心，这个授权中心服务于所有的系统，用户登录/退出都经过授权中心；

基本实现逻辑

今天我们讲vue中单点登录以code换token的这种方法，它的基本逻辑过程如下图：

上图已经很清晰的展示了sso单点登录在vue项目中的实现过程，其实就是用户在请求url后，前端通过判断是否有code参数，从而走不同的接口请求：

• a、url有code，则需要将code值传给后端授权接口验证真伪，真则通过授权，登录成功；
• b、url没有code，如果请求正常接口为401，则说明未登录，跳去登录页，如果正常接口请求为200，说明已经登录成功，前端此时启动Vue；

由于vue的特殊性，我们要在拿到授权后才启动vue应用，在这之前启动vue，可能会出现闪现首页，甚至会有跳来跳去的问题，这些都是小编实践经验总结。

值得注意的是，401时，在输入密码登录成功后，后端是不会一下子跳转到原请求url的，因为网站可能有很多url，无法一一记录并验证url的合法性，因此登陆以后，后端是固定跳转到首页+code的。

简单示例（vue2.x）：

main.js

import Vue from 'vue'
import { start } from '@/utils/sso.js'
import App from './App'
import store from './store'
import router from './router'

function setup(){
    new Vue({
        el: '#app',
        router,
        store,
        render: h => h(App)
    })
}

start(()=>{
    setup()
})

sso.js

import Cookies from 'js-cookie'
import axios from 'axios'
import user from '@/api/user'

export function start(next){
    let code = getQueryVariable('code')
    if(code){
        getTokenByCode(code, next)
    }else{
        user.getUserInfo().then((res)=>{
            typeof next==='function'?next():''
        })
    }
}

function getQueryVariable(variable) {
    let query = window.location.search.substring(1)
    let vars = query.split('&')
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split('=')
        if (pair[0] === variable) {
            return pair[1]
        }
    }
    return ''
}
function getTokenByCode(code, next){
    axios({
        url: 'get/token',
        data: { code },
        method: 'post'
    }).then((res)=>{
        Cookies.set('access_token', res.access_token)
        typeof next==='function'?next():''
    })
}

差不多了，具体细节就靠你自己啦，快去试试吧