I am trying to restrict access to the login if the user is already logged in by checking if there is already a token in the localStorage. Any idea on how I can fix it ?

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;

CodePudding user response：

just you can add a middleware to your route like this:

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

and this is a middleware example:

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