javascript - 我是否正确使用它来保护 Vuejs 和 Vuex 中的路由？

Question

我正在 Vue.js 和 Laravel 中构建一个 SPA。我正在使用 laravel 护照进行基于令牌的身份验证。我在保护 Vue 路由方面遇到了问题。我正在使用 Vue 路由器导航卫士。我在用户登录时存储令牌和用户。当用户重新加载页面并将令牌和用户存储在 vuex 中时，我还在 app.js 中获取用户。问题是从 vuex 调用时，用户在 router.beforeEach 中始终为空。我的 app.js 看起来像这样

require('./bootstrap');

import store from './store/index'
import router from './router/index'
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

window.Vue = require('vue').default;
Vue.use(VueToast);

store.dispatch('user/fetchUser');

const app = new Vue({
    el: '#app',
    store,
    router
});

我已经以某种方式解决了它，但我不确定它是否有效或者以后会失败。现在我让用户进入 router.beforeEach。解决后 app.js 长这样

require('./bootstrap');

import store from './store/index'
import router from './router/index'
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

window.Vue = require('vue').default;
Vue.use(VueToast);

store.dispatch('user/fetchUser').then(() => {
    
    const app = new Vue({
        el: '#app',
        store,
        router
    });

});

我首先获取用户，然后在承诺解决时创建 vue 实例。这样做可以吗，否则以后会失败？

我心中还有另一个问题。我是否应该摆脱获取用户并仅检查 localStorage 中是否有令牌并通过检查令牌来保护路由。

标签： javascriptlaravelvue.jsvuex