Question

我的 vuejs 项目遇到了问题。我在单页应用程序中使用 vue 路由器。我可以使用 vue 路由器转到任何页面。但是当我在任何路线上重新加载页面时，它会将我重定向到项目的 /。这是我在 router/index.js 文件中为 vue 路由器编写的代码。

import Vue from 'vue'
import VueRouter from 'vue-router'
// import store from '../store'
import Home from '../views/Home.vue'
import Login from '@/components/auth/Login.vue'
import Register from '@/components/auth/Register.vue'
import Admin from '@/components/admin/Admin.vue'
import CreateCourse from '@/components/admin/course/CreateCourse.vue'
import Categories from '@/components/admin/Categories.vue'

Vue.use(VueRouter);

function isAuthenticated(to, from, next) {
    // if (store.getters['auth/authenticated']) {
    //     next();
    // } else {
    //     next('/login');
    // }
    next();
}

function isAdmin(to, from, next) {
    // if (store.getters['auth/user'].role === 'super' || store.getters['auth/user'].role === 'admin') {
    //     next();
    // } else {
    //     next('/');
    // }
    next();
}

function isNotAuthenticated(to, from, next) {
    // if (!store.getters['auth/authenticated']) {
    //     next();
    // } else {
    //     next('/');
    // }
    next();
}

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/about',
        name: 'About',
        beforeEnter: isAuthenticated,
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        beforeEnter: isNotAuthenticated,
    },
    {
        path: '/register',
        name: 'Register',
        component: Register,
        beforeEnter: isNotAuthenticated,
    },
    {
        path: '/admin',
        name: 'Admin',
        component: Admin,
        beforeEnter: isAdmin,
    },
];

const router = new VueRouter({
    mode: 'history',
    routes
});

export default router

有什么问题？

注意：注释代码是为了控制用户对特定路由的访问。我为每条路线调用 beforeEnter 以检查用户是否有权限。有没有更好的解决办法？

Answer 1

我发现我的代码有什么问题。每次我重新加载页面时，我都会使用 vuex 对用户进行身份验证，如果身份验证成功，我会将用户重定向到主页。因此，每次刷新页面时，我都会通过身份验证并重定向到主页。现在我把登录后的重定向登录去掉了，问题解决了。

使用 vue 路由器刷新页面重定向到主页

1 个答案: