首页 > Vue >

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

时间: 作者:admin 浏览:

单点登录概念

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

比如某宝,就属于多系统平台,既有买家购物系统、交易支付系统,还有卖家店铺管理系统、流量统计系统等等,如果没有单点登录,很简单的跨系统场景:假如有一个用户既是买家又是卖家,用户从卖家系统登录后,如果想要去购物,就要再次登录买家购物系统,支付的时候再登录一次交易支付系统,用户是不是该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():''
    })
}

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

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4