从导航警卫重定向到通过导航警卫

Question

我试图使用Vue路由器身份验证保护我的Vue组件。

案例场景:未经身份验证的用户登陆主页("/“路由)，他试图访问"/profile"，但这是一个私有组件，因此他将被vue路由器重定向到"/ Auth /profile"，因此他将身份验证，然后Auth组件将用户重定向到"/profile”组件，因为他在URL中获得了它的路径。

那是我的守卫

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.private)) {
    if (!store.getters.getUser) {
      //console.log("PRIVATE - NOT authenticated");
      next({ path: "/auth" + `${to.path}` });
    } else {
      //console.log("PRIVATE - authenticated");
      next();
    }
  } else {
    //console.log("NOT PRIVATE");
    next();
  }
});

一切正常工作，但我得到了一个错误，这是令人讨厌的

Redirected when going from "/" to "/profile" via a navigation guard.

Answer 1

通过替换来解决问题

 next({ name: "Onboarding" });

使用

router.push({ path: 'Onboarding' });

Answer 2

在代码中的某个地方，在被重定向到"/profile"之后，您将被重定向回"/"。这就是vue路由器所抱怨的。

因此，问题在于每个动作被重定向多次。

您需要确保每个导航操作只有一个重定向。

Answer 3

将vue路由器版本降为3.0.7，或者按照app.js或index.js中的代码进行操作，其中一个是导入vue-router的示例：

import Vue from 'vue';
import VueRouter from 'vue-router';

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {undefined
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter);
...

#code