Wenzi

Vue: 单页面应用如何保持登录状态

蚊子前端博客
发布于 2018/11/20 23:54
在单页面应用中,若使用vuex管理登录状态时,经常会存在刷新页面后登录状态消失的问题,这个问题怎么解决呢?

在单页面应用中,若刷新页面后,登录态是保存不了的。比如我在首页获取到了登录信息,然后存储到vuex中,进入到某个路由中,若当前路由刷新后,vuex中的数据就会被清空,以此也会导致当前路由中依赖登录态的接口都会失效。

那么,若当前路由需要刷新,或者当前路由存在第三方的跳转链接时,该怎么办呢?

目前是有两种思路,可以供大家参考一下:

1. router与vuex的结合 #

如果您的登录态是通过vuex管理的话,那么一般是首页获取到登录信息,然后存储到vuex中,然后其他路由直接使用即可。但是这样存在的问题,就是刷新页面后,vuex的数据就会消失。这里我们需要借助router中的一个方法。

在router中有一个beforeEach方法,这个方法在路由发生变化时就会触发,当然,在当前路由刷新时也会触发,那么就可以在这里监听登录状态的变化。

首先是在router/index.js中明确哪些路由是需要登录后才能访问的,哪些是可以直接访问的,下面的代码中可以看到我的奖励页面是需要登录才能访问的,而且奖励中有可能会存在第三方的跳转链接:

// router/index.js

Vue.use(Router);

export default new Router({
    routes: [
        {
			path: '/', // shouye
			name: 'home',
			components: {
				Home
			}
        },
        {
			path: '/myprize', // 我的奖励
			name: 'myprize',
			components: {
				MyPrize
            },
            meta: {
                requiresAuth: true
            }
        }
    ]
})

那么我们在router/auth.js这样判断:

// router/auth.js
import router from './index.js'; // 获取到路由列表
import store from '../store'; // 获取vuex中的store

router.beforeEach((to, from, next)=>{
    if(to.meta.requiresAuth){
        // 若当前页面需要登录
        if(store.state.user.nickname){
            // 若vuex中存在用户的昵称,则说明当前有登录态
            next();
        } else {
            // 通过检测接口检验用户的登录态,
            // 然后将获取到的信息再次存储到vuex中
            User.getUserInfo(result=> {
                if(result.nickname){
                    store.commit('setUserInfo', result);
                    next();
                } else {
                    // 去登录
                }
            })
        }
    } else {
        next();
    }
})

若vuex中不存在用户的数据,则说明当前页面肯定是刷新后的,或者从别的页面回退回来导致刷新的。那只能从接口中判断登录态了,若检测到存在登录态,则将用户信息重新存储到vuex中,方便下次的使用;若接口里依然没有登录态,则说明用户真的没有登录,只能让用户去登录了。

2. sessionStorage #

我看有的同学说可以用seesionStorage存储登录信息,不过既然已经使用sessionStorage来存储信息后,感觉也就没必要再通过vuex转换一遍了,不过两者结合起来倒是也可以。

而且现在sessionStorage在移动端的兼容性也非常好,基本不用考虑是否可以用的问题。

// store

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

const store = new Vuex.Store({
    state: {
        user: JSON.parse( sessionStorage.getItem('user') || '{}' )
    }

    actions: {
        setUserInfo(state, userinfo){
            state.user = Object.assign({}, state.user, userinfo);

            if(userinfo.nickname){
                sessesionStorage.setItem('user', JSON.stringify(user));
            }
        }
    }
})

这里也只是个简单的样例代码,具体中可以要判断的东西也会更多。

3. 总结 #

在客户端内放置的单页面应用,虽然能让用户操作的比PC上更少,但刷新页面和跳转到第三方链接的情况,还是存在的,因此这个登录问题还是要解决的。目前我正在使用的就是第一种方案,不过我的项目是在客户端里的,可以通过客户端暴露的jsapi来检测登录态。

标签:vuelogin
阅读(7447)
Simple Empty
No data