vue 前后端分离,单点登录状态管理

高科技

在单点登录情况下的vue+vuex登录状态管理

准备工作

  1. axios,或者其它的异步请求插件,参考前面的文章 axios 全局设置
  2. vuex,用于保存登录状态,操作方法参考 官网
  3. wwp-js-url-helper 操作url插件,操作方法参考 javascript url 操作类
  4. wwp-js-cookie 操作cookie插件, 操作方法参考 javascript cookie常规封装
  5. sessionstorage 保存登录信息在本地,在刷新页面之后也可以保持登录状态

1,编写vuex

src 下新建store文件夹,在store下新建index.js,内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import sessionstorage from 'sessionstorage'
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        loginInfo: sessionstorage.getItem('loginInfo') ?  
JSON.parse(sessionstorage.getItem('loginInfo')) :
    {
            id:0,
            loginname:'我',
            avatar:''
        }
    },
    getters:{
        //这里为什么这么写,是因为state的缓存问题,这么写可以保证每次都获取到最新的数据
        getLoginInfo:(state)=>()=>{
            return state.loginInfo;
        }
    },
    mutations:{
        setLoginInfo(state,info){
            state.loginInfo = info;
        }
    },
    actions:{
        setLoginInfo(context,info){
            context.commit("setLoginInfo",info);
            sessionstorage.setItem('loginInfo',JSON.stringify(info));
        }
        
    }
});
export default store;

2,路由拦截

main.js中添加全局的路由拦截

import store from './store'
import jsurl from 'wwp-js-url-helper'
import cookie from 'wwp-js-cookie'
import axios from 'axios'
router.beforeEach((to, from,next) => {
    //已登录状态
    if(store.getters.getLoginInfo().id > 0){
        //去除url上的token信息
        if(to.query.token){
            window.location.href = jsurl.removeHash('token');
            window.location.reload();
        }
        next();
        return;
    }
    //构造一个跳转到单点登录中心的url,带上from 表示来源地址,登录中心登录成功后会根据这个地址带上token跳转回来
    const jumpUrl = jsurl.updateSearch('from',encodeURIComponent(jsurl.removeHash('token',window.location.href)),'https://login.test.com/');
    //从url或cookie拿到token
    const token = to.query.token || $cookie.get('token') || '';
    if(token && token.length > 0){
        //把token添加到axios,以后请求就不用每次都手动写headers了
        axios.defaults.headers.common['token']  = token;
        //再存一份到cookie
        cookie.set('token',token);
        //去api获取登录信息,这里的api地址以及返回值需要自己处理一下,这里只是简单演示
        axios.get('/api/login/info').then((info)=>{
            //这里判断为id>0为已成功获取到登录信息
            if(info.id > 0){
                store.dispatch('setLoginInfo',info);
                //这里还可以去除一下url的token信息
                if(to.query.token){
                    window.location.href = jsurl.removeHash('token');
                    window.location.reload();
                }
                next();
            }else{
                window.location.href = jumpUrl;
            }
        });
    }else{
        window.location.href = jumpUrl;
    }
})

3,使用登录信息

在页面,组件中,获取登录信息

const info = this.$store.getters.getLoginInfo();
//或者
// const info = this.$store.state.loginInfo;

4,奇怪的地方

需要注意的是,如果一个组件里很多地方用到登录信息,那么咱并不会每次都写那么长一串去获取。一般都是获取在data中,然后已比较短的名字去读取信息,那么这就会有问题,就是data里的变量并不会跟着 vuex里state里的数组变化而自动更新。

这种情况,需要用watch去处理,如下

export default {
    name:'xxx',
    data(){
        return{
            info:this.$store.getters.getLoginInfo()
        }
    },
    watch:{
        '$store.state.loginInfo':function(newFlag, oldFlag){
            this.info = this.$store.getters.getLoginInfo();
        }
    },
}

2
说点什么

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
wwpingcn超人下拉系统 Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
超人下拉系统
Guest

这个代码是不错的了