在单页面应用中，若使用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来检测登录态。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
