[英]How to redirect to /dashboard public routes /login and /register if user is logged in and in all other cases show public routes?
I have two types of routes Public and Private.我有两种类型的路线公共和私人。
All private routes are accessible only if user is logged in:只有在用户登录后才能访问所有私有路由:
return tokenService.token
? (
<>
<Header />
<Suspense fallback={<Spinner className="spinner" />}>
<Outlet />
</Suspense>
<Footer />
</>
) : (
<Navigate to={'/login'} replace />
);
Then we have public routes.然后我们有公共路线。 Which can be accessible anywhere but /login
and /registration
routes even they are public if user is logged in they should be redirected to / dashboard
in all other cases we show public route.除了/login
和/registration
路由之外的任何地方都可以访问它们,即使它们是公共的,如果用户已登录,在我们显示公共路由的所有其他情况下,它们应该被重定向到 / dashboard
。
This is our file for public route这是我们的公共路线文件
return (
<>
<AuthHeader />
<Suspense fallback={<Spinner className="spinner" />}>
<Outlet />
</Suspense>
<Footer />
</>
)
Main routes file主要路线文件
<Routes>
<Route element={<PublicRoute />}>
<Route path={'/login'} element={<Login />} />
<Route
path={'/registration'}
element={<Registration />}
/>
<Route path={'/terms'} element={<Terms />} />
<Route path={'/privacy'} element={<Privacy />} />
</Route>
<Route element={<AuthRoute />}>
<Route path={'/dashboard'} element={<MyProfile />} />
</Route>
<Route path={'/notfound'} element={<PageNotFound />} />
</Routes>
So what would be the most efficient way to redirect "/login"
and "/registration"
routes to "/dashboard"
route if user is logged in and in all other cases show public routes?那么,如果用户已登录并且在所有其他情况下显示公共路由,那么将"/login"
和"/registration"
路由重定向到"/dashboard"
路由的最有效方法是什么?
So user should be able to access "/terms"
from anywhere but if he is logged in then he doesn't have access to "/login"
and "/registration"
routes (redirect to "/dashboard"
).因此,用户应该能够从任何地方访问"/terms"
,但如果他已登录,则他无权访问"/login"
和"/registration"
路由(重定向到"/dashboard"
)。
In current code even user is logged in he can access to all public routes.在当前代码中,即使用户已登录,他也可以访问所有公共路由。
Create an anonymous route protector for the log-in and dashboard routes that does the inverse of the private route protector.为登录和仪表板路由创建一个匿名路由保护器,它与私有路由保护器相反。
Example:例子:
const AnonymousRoute = () => {
return tokenService.token
? <Navigate to="/dashboard" replace />
: <Outlet />;
};
<Routes>
<Route element={<PublicRoute />}>
<Route element={<AnonymousRoute />}>
<Route path="/login" element={<Login />} />
<Route
path="/registration"
element={<Registration />}
/>
</Route>
<Route path="/terms" element={<Terms />} />
<Route path="/privacy" element={<Privacy />} />
</Route>
<Route element={<AuthRoute />}>
<Route path="/dashboard" element={<MyProfile />} />
</Route>
<Route path="/notfound" element={<PageNotFound />} />
</Routes>
You can check if user is logged in or not in each of login and registration page.您可以在每个登录和注册页面中检查用户是否登录。 For example:例如:
useEffect(() => {
if (userInfo) {
userInfo?.user?.role === 'admin'
? navigate('/dashboard')
: userInfo?.user?.role === 'client'
? navigate('/client-dashboard')
: navigate('/translator-dashboard');
return;
}
}, [])
In above snippet.在上面的片段中。 what I did is to check if logged in user role.我所做的是检查是否已登录用户角色。 Based on user role I have navigate user to respective page.根据用户角色,我已将用户导航到相应的页面。 For your case you can do similar like this you have to check in login and registration page.对于你的情况,你可以像这样做类似的事情,你必须检查登录和注册页面。 Hope this concept will help you.希望这个概念对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.