vue 路由器 - 身份验证成功后重定向

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 || '/');

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

Answer 2

使用cookie存储

this.cookieUrl = this.$route.query.redirecturl
if (this.cookieUrl) {
  cookieStorage.setItem('redirecturl', this.cookieUrl, false, 2000000)
}

登录后检查cookie

 if (cookieStorage.getItem('redirecturl')) {
            this.$router.push({
              path: cookieStorage.getItem('redirecturl')
            })
cookieStorage.removeItem('redirecturl')

Answer 3

在这种情况下可行的简单方法就是在成功登录后重定向回之前的路线。

$router.go(-1)

Answer 4

您最好的选择是首先将用户重定向到

login

页面，并使用指定原始页面的参数。比如：

if(!loggedIn) {
  // If not authenticated, add a path where to redirect after login.
  this.$router.push({ name: 'login', query: { source_path: '/current_route' }});
}

（您可以选择使用

this.$route.query.page

代替显式

/current_route

字符串）。

然后在

login

页面中有一个方法，如果设置了参数，则使用该参数，或者回退到主页：

this.$router.push(this.$route.query.source_path || '/')