Vue: 单页面应用如何保持登录状态-蚊子的前端博客

在单页面应用中，若刷新页面后，登录态是保存不了的。比如我在首页获取到了登录信息，然后存储到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来检测登录态。

推荐订阅源

蚊子的前端博客

1. router与vuex的结合 #

2. sessionStorage #

3. 总结 #