vue-router 中无法获取vuex中的数据

Question

想做登录的导航守卫 发现获取到的数据是{__ob__: Observer} 并不是想要的数据

vue-router

import store from '../store'

router.beforeEach((to, from, next) => {
  const userInfo = store.state.userInfo
  console.log(userInfo); //结果是{__ob__: Observer} 导致无法拦截
  if (to.path === '/login') {
    return next()
  } else {
    if (userInfo) {
      return next()
    } else {
      return next('/login')
    }
  }
});

Answer 1

一般登录的时候会获取到后端传过来的token，将token通过sessionstorage或者cookie储存起来，在导航守卫router.beforeEach中获取token来作为登录的依据。

如果没有使用token的话，可以采用用户名或者变量（isLogin）来作为登录的依据。（这种方法没有使用token安全）。

在vuex中登录的方法中调用登录api成功之后，将登录用户名username或者isLogin储存进cookie里。

// store/index.js
// 其他内容省略

actions: {
    // 登陆
    login ({commit}, userInfo) {
      return new Promise((resolve, reject) => {
        frontUserApi.getBaseUserLogin(userInfo).then(res => {
          if (res.data.userId) {
            commit('setName', res.data.username) // 保存username到vuex
            commit('setIsLogin', true) // 保存userId到vuex
            Cookies.set('username', res.data.username) // 保存用户名到cookie
            Cookies.set('isLogin', true) // 保存islogin到cookie
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    }
}

而不要对象或者数组之类比较复杂的东西。另外也不要使用vuex（store）中来作为登录的依据，因为只要刷新，vuex会被清空。使用sessionstorage或者cookie都可以。

之后就在router中就简单了。

import Cookies from 'js-cookie'

router.beforeEach((to, from, next) => {
  const isLogin = Cookie.get('isLogin')
  if (to.path === '/login') {
    return next()
  } else {
    if (isLogin) {
      return next()
    } else {
      return next('/login')
    }
  }
});