停止登录用户访问vue中的登录路由

Question

我有以下代码从我的应用程序:存储/模块/user.js

const state = {
user: {
id: "",
email: "",
orgName: "",
},
isLoggedin: false,
};
const getters = {
currentUser: (state) => state,
isLoggedin: (state) => state.isLoggedin,
};

路由器/index.js

const routes = [{
path: "/sign-up",
name: "Signup",
component: () =>
import ("../views/auth/Signup.vue"),
},
{
path: "/",
name: "Login",
component: () =>
import ("../views/auth/Login.vue"),
},
{
path: "/dashboard",
name: "Dashboard",
component: () =>
import ("../views/Dashboard.vue"),
meta: {
requiresAuth: true
},
},
{
path: "/post",
component: () =>
import ("../views/Index"),
meta: {
requiresAuth: true
},
children: [{
path: "/",
name: "posts",
component: () =>
import ("../views/post/Index.vue"),
},
{
path: "create",
component: () =>
import ("../views/post/Create.vue"),
},
{
path: "view",
component: () =>
import ("../views/booking/View.vue"),
},
],
},
];
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
const isLoggedin = store.getters["isLoggedin"];
console.log(router);
if (requiresAuth && !isLoggedin) {
next("/");
} else if (requiresAuth && isLoggedin) {
next();
} else {
next();
}
});

在上面的代码中，只有经过认证的用户才能访问post路由(创建、查看、索引)。但登录用户仍然可以访问登录页面并重新登录。

当用户登录成功时，state.user.isLoggedin设置为true。

我想重定向登录用户到/dashboard时，他们点击登录url。

这个最好的逻辑是什么?

Answer 1

就像您创建requireAuth流程一样，您也可以创建requireGuest流程:

const routes = [{
path: "/sign-up",
name: "Signup",
meta: {
requiresGuest: true
},
component: () =>
import ("../views/auth/Signup.vue"),
},
{
path: "/",
name: "Login",
meta: {
requiresGuest: true
},
component: () =>
import ("../views/auth/Login.vue"),
},
{
path: "/dashboard",
name: "Dashboard",
component: () =>
import ("../views/Dashboard.vue"),
meta: {
requiresAuth: true
},
},
{
path: "/post",
component: () =>
import ("../views/Index"),
meta: {
requiresAuth: true
},
children: [{
path: "/",
name: "posts",
component: () =>
import ("../views/post/Index.vue"),
},
{
path: "create",
component: () =>
import ("../views/post/Create.vue"),
},
{
path: "view",
component: () =>
import ("../views/booking/View.vue"),
},
],
},
];
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
const requiresGuest = to.matched.some((x) => x.meta.requiresGuest);
const isLoggedin = store.getters["isLoggedin"];
console.log(router);
if (requiresAuth && !isLoggedin) {
next("/");
} else if (requiresGuest && isLoggedin) {
next("/dashboard");
}  else {
next();
}
});

Answer 2

您可以在登录路由上使用beforeEnter将登录用户重定向到仪表板。

{
path: "/",
name: "Login",
component: () =>
import ("../views/auth/Login.vue"),
beforeEnter: async (to, from, next) => {
const isLoggedIn = store.getters["isLoggedin"];
if (isLoggedIn) {
return next("/dashboard");
}
next();
},
},