我有一個使用 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;uj5u.com熱心網友回復：
使用 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')
uj5u.com熱心網友回復：
在這種情況下可以使用的簡單明了的方法是在成功登錄后簡單地重定向回之前的路由。
$router.go(-1)
uj5u.com熱心網友回復：
您最好的選擇是最初將人員重定向到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 || '/')
uj5u.com熱心網友回復：
除了呼叫 之外next('/login')，您還可以將用戶想要訪問的路由作為查詢引數傳遞，如下所示：
next({
path: '/login',
query: {
redirect: to.fullPath,
}
})
然后，在登錄頁面，認證成功后，就可以呼叫
this.$router.replace(this.$route.query.redirect || '/');
它將用戶重定向到他們最初想要訪問的頁面，或者如果沒有有關重定向的資訊，則重定向到主頁。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359407.html