未设置存储值时如何设置 vuex 和 vue-router 以重定向？答案

【问题标题】：How to setup vuex and vue-router to redirect when a store value is not set?未设置存储值时如何设置 vuex 和 vue-router 以重定向？
【发布时间】：2018-01-16 05:23:46
【问题描述】：

我正在使用最新版本的 vue-router、vuex 和 feathers-vuex，但我的路由器有问题。

我正在做的是检查路由是否在 meta.json 文件中具有属性"requiresAuth": true。如果是，则检查feathers-vuex提供的store.state.auth.user的值，如果未设置此值，则重定向到登录。

这工作正常，除非我已登录并且如果我重新加载名为 /private 的受保护页面，然后它会被重定向到登录，因此 store.state.auth.user 的值似乎在 router.beforeEach 中尚未准备好。

那么我如何设置我的路由器以便在正确的时刻获得商店的价值？

我的文件如下：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

const meta = require('./meta.json')

// Route helper function for lazy loading
function route (path, view) {
  return {
    path: path,
    meta: meta[path],
    component: () => import(`../components/${view}`)
  }
}

Vue.use(Router)

export function createRouter () {
  const router = new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: [
      route('/login', 'Login')
      route('/private', 'Private'),
      { path: '*', redirect: '/' }
    ]
  })

  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
      if (!store.state.auth.user) {
        next('/login')
      } else {
        next()
      }
    } else {
      next()
    }
  })

  return router
}

meta.json

{
  "/private": {
    "requiresAuth": true
  }
}

【问题讨论】：

您应该提供为第一次加载准备商店的启动操作
你知道router.vuejs.org/en/advanced/meta.html吗？所以你可以在关于商店的路线上定义 requiresAuth，我在 Login.vue 中处理整个登录逻辑，这也将用户设置在商店中，嗯，但我没有 /login 路线，我'如果 user.id 丢失，m 有条件地加载 Login.vue 而不是请求的组件，如果用户未登录并且不需要在成功登录时重定向，那么登录会自动显示而不管 url ..也许这有帮助跨度>

标签： vue.js vuejs2 vue-router vuex feathersjs

【解决方案1】：

我通过从 vuex 操作返回一个承诺然后运行验证解决了这个问题

router.beforeEach((to, from, next) => {
  store.dispatch('auth/authenticate').then(response => {
    next()
  }).catch(error => {
    if (!error.message.includes('Could not find stored JWT')) {
      console.log('Authentication error', error)
    }
    (to.meta.requiresAuth) ? next('/inicio-sesion') : next()
  })
})

【讨论】：