vue router - 身份验证成功后重定向

Question

我有一个使用 vue 路由器的 vue 应用程序。我为登录路由实现了一个身份验证系统。如何让它在登录成功后自动重定向到用户最初想要访问的路线？

这是我的代码

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Collections from "../views/Collections.vue";
import Login from "../views/Login.vue";
import store from "../store/index";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/",
    name: "Home",
    component: Home,
  },

  {
    path: "/collections",
    name: "Collections",
    component: Collections,
    //meta: { requiresAuth: true }
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  if (!store.getters.isAuthenticated && to.name !== "Login") {
    next("/login");
  } else {
   next();
  }
});

export default router;

Answer 1

除了调用 之外next('/login')，您还可以将用户想要访问的路线作为查询参数传递，如下所示：

next({
    path: '/login',
    query: {
       redirect: to.fullPath,
    }
})

然后在登录页面，认证成功后，就可以调用

this.$router.replace(this.$route.query.redirect || '/');

它将用户重定向到他们最初想要访问的页面，或者如果没有有关重定向的信息，则重定向到主页。