Vue2在刷新任何页面时重定向到主页

Question

我正在尝试在 vue2 上工作。我面临一个奇怪的问题。 我有 4 条路线。

1. /login 当用户未登录时，他们将看到此页面，以便他们可以登录。
2. /uploads 当用户登录时他们被重定向到这个页面。
3. /为其他工作训练此页面
4. /documents/collaboration 当他们使用这个路由器时，它应该只渲染 train 组件，但 url 将是 BASE_URL/documents/collaborate

我的问题是当我刷新 /train 页面或粘贴协作 url 时，它会将我重定向到 /uploads。

我不知道这有什么问题以及为什么会这样。

下面是我的 router.js 的代码

import Vue from 'vue'
import Router from 'vue-router'
import LoginPage from './views/Login.vue'
import Uploads from './views/Uploads.vue'
import Train from "./views/Train";

Vue.use(Router)


export const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginPage,
      meta: {bodyClass: 'auth-wrapper'}
    },
    {
      path: '/', redirect: '/uploads'
    },
    {
      path: "/uploads",
      name: 'Uploads',
      component: Uploads,
      meta: {bodyClass: 'full-screen', verboseName: 'Data Classifier', icon: '@/assets/img/company5.png'}
    },
    {
      path: "/train",
      name: 'Train',
      component: Train,
      meta: {bodyClass: 'full-screen', verboseName: 'Data Trainer', icon: '@/assets/img/company5.png'}
    },
    {
      path: "/documents/collaborate/:id",
      name: "Collaborate",
      component: Train,
      meta: {bodyClass: 'full-screen', verboseName: 'Data Trainer', icon: '@/assets/img/company5.png'}
    }
  ]
})

router.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/login'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('user-token');

   if (authRequired && loggedIn === null) {
     return next('/login');
   }
   if (loggedIn !== null && !authRequired) {
     return next('/uploads');
   }
  next()

})

export default router;  

Answer 1

重定向到/uploads，因为if (loggedIn !== null && !authRequired) {...} 条件在route.beforeEach() 内是true。变化：

router.beforeEach((to, from, next) => {
   ...
   if (authRequired && loggedIn === null) {
     return next('/login');
   }

   // navigate to to.path() page
   next();
})