日踩一坑：关于登录跳转读取store中的token拿到undefined的问题

明明token拿到了，在点击登录的时候存储到了本地，但是在跳转访问权限的时候却拿不到，开始我是以常量来接收store中的token，但拿到的值为undefined导致页面无法跳转，最后直接将store.getters.token写入判断才正常拿到，问了朋友才知道：

token赋值到store有延迟吧

判断是否有token的时候还没赋值进去

 ...mapActions(['user/login']),
    // 登录
    loginBtn() {
      // 验证表单
      this.$refs.loginForm.validate(async isok => {
        if (isok) {
          this.loading = true
          try {
            // 登录
            await this['user/login'](this.loginForm)
            console.log(this.$store.getters.token)
            // 跳转
            this.$router.push('/')
          } catch (error) {
            console.log(error)
          }
          // 关闭loading
          this.loading = false
        }
      })
    },

 

import router from './router'
import store from '@/store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  // 判断是否有token
  if (store.getters.token) {
    // 有token,如果是进入login则免登录进入主页
    if (to.path === '/login') {
      next('/') // 跳到主页
    } else {
    // 不是进入登录页则放行，并判断是否有用户资料，无则获取用户资料
      if (!store.getters.userId) {
        // 该方法为异步方法，不会阻塞运行，可能会出现还没获取完毕就已经跳转的情况，所以此处使用async/await修饰
        // 获取完资料再去放行
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    // 无token  判断是否在白名单，在则放行
    if (whiteList.indexOf(to.path) !== -1) {
      next()
      // 判断是否
    } else {
    // 既无token又不在白名单，则跳转至登录页
      next('/login') // 跳到登录页
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})
// 后置守卫
router.afterEach(function() {
  NProgress.done() // 关闭进度条
})