如何设置vuex和vue-router在商店值未设置时重定向？

我正在使用最新版本的vue-router，vuex和feathers-vuex，并且我的路由器出现问题。如何设置vuex和vue-router在商店值未设置时重定向？

我在做的是检查一个路线是否在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 
    } 
}

来源

2017-08-08 Lobosan

你应该提供Ë发起行动，这将准备商店的第一个加载 – SaJed

你知道https://router.vuejs.org/en/advanced/meta.html？所以你可以在关于商店的路由本身上定义requiresAuth，我在Login.vue中处理整个登录逻辑，它也在商店中设置用户，但是我没有/登录路由，我'm加载Login.vue有条件地而不是所请求的组件，如果user.id缺失，这种方式登录会自动显示，无论网址，如果用户没有登录，并且不需要重定向成功登录..可能这有助于 – Can

我从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() 
    }) 
})

来源

2017-08-09 19:41:14 Lobosan

如何设置vuex和vue-router在商店值未设置时重定向？

回答

相关问题