如果登录条件为真，则尝试限制对路由的访问

Question

如果用户已经登录，我试图通过检查 localStorage 中是否已有令牌来限制对登录的访问。关于如何修复它的任何想法？

import { createRouter, createWebHistory } from "vue-router";

import Login from "./pages/auth/Login";
import Register from "./pages/auth/Register";
import Forgot from "./pages/auth/Forgot";
import Home from "./pages/landing/Home";
import Team from "./pages/landing/Team";
import Prices from "./pages/landing/Prices";

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: "/", redirect: "/home" },
        { path: "/login", component: Login },
        { path: "/register", component: Register },
        { path: "/forgot", component: Forgot },
        { path: "/home", component: Home },
        { path: "/team", component: Team },
        { path: "/prices", component: Prices },
    ],
});

const loggedIn = !!localStorage.getItem("token");
router.beforeEach((to, from, next) => {
    if (to.name !== "Login" && !loggedIn) next({ name: "Login" });
    else next("./home");
});

export default router;

Answer 1

你可以像这样在你的路由中添加一个中间件：

Route::get('/login',[CustomAuthController::class,'login'])->middleware('alreadyLoggedIn');

这是一个中间件示例：

public function handle(Request $request, Closure $next)
{
    if(Session()->has('loginId') && (url('login')==$request->url()|| url('registration')
    ==$request->url())){
        return back();
    }
    return $next($request);
}

Answer 2

虽然，对于未经身份验证的用户，守卫将按预期运行，但在用户登录后，每条路线都会重定向到“/home”。相反，您应该不带选项地调用 next()，让路由器导航到初始位置。

router.beforeEach((to, from, next) => {
    if (to.name !== "Login" && !loggedIn) next({ name: "Login" });
    else next();
});

此外，由于您似乎正在使用 vue-router v4，因此您可以转储 next 参数（现在已弃用）并且只 return 路由。

router.beforeEach((to, from) => {
    if (to.name !== "Login" && !loggedIn) return { name: "Login" };
});

此外，作为旁注，next("./home") 看起来不正确。它不是路径而是 url: next("/home")

Answer 3

路由示例代码：

Route::get('login',[AuthController::class,'login'])->middleware('CurrentlyLoggedIn');

中间件示例代码：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class CurrentlyLoggedIn
{
    /**
     * Handle an incoming request.
     *
     * @param Request $request
     * @param Closure $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        if(session()->has('loginId')
            && (url('login') == $request->url() || url('registration') == $request->url())){
            return back();
        }

        return $next($request);
    }
}

如果登录条件为真，则尝试限制对路由的访问

Trying to restrict access to a route if loggedIn condition is true

html

php

laravel

vue.js

vuejs2