在单页面应用中,若使用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来检测登录态。