如何設置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在商店值未設置時重定向？

回答

相關問題