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

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

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

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

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

1. router与vuex的结合

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

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

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

COPYJAVASCRIPT

// 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这样判断:

COPYJAVASCRIPT

// 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在移动端的兼容性也非常好,基本不用考虑是否可以用的问题。

COPYJAVASCRIPT

// 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来检测登录态。

标签:
阅读(5254)

公众号:

qrcode

微信公众号:前端小茶馆