如何在router.beforeEach

时间:2019-04-14 09:29:13

标签: vuejs2 vuex

在主要方面,我具有以下启动功能:

new Vue({
    el: "#app",
    render: h => h(App),
    store,
    router,
    mounted() {
        this.startUp();
    },
    methods: {
        startUp() {
            store.dispatch('auth/startUp')
                .catch(err => console.log(err));
        }
    },
});

问题是startUp是在router.beforeEach((to, from, next)之后启动的。在beforeEach中,我需要验证:

  1. 如果不仅只有某些路由可供他们使用,用户是否已完成设置。如果用户访问了错误的路由,则应将其重定向到与设置内联的正确路由。
  2. 用户应访问受保护的路径-将用户带到主页。

如果用户决定刷新页面,则启动脚本应刷新用户状态。加载后,将使用Vuex管理状态。

我在main.js中定义了我的路线。 store.state.auth.user为空,因为启动端点在router.beforeEach((to, from, next)之后结束。

// configure router
const router = new VueRouter({
    routes, // short for routes: routes
    linkExactActiveClass: "nav-item active"
});

router.beforeEach((to, from, next) => {
    if (store.state.auth.user && store.state.auth.user.setup) {
        const user = store.state.auth.user;
        var path = to.path !== "/setup" && to.path !== "/logout" ? "/setup" : false;

        if (path) {
            next({
                path: path,
                query: {
                    redirect: to.fullPath
                }
            });
        }
    }
});

0 个答案:

没有答案