You've already forked DataMate
Jerry Yan
7043a26ab3
- 在侧边栏添加退出登录按钮并实现登出逻辑 - 添加 ProtectedRoute 组件用于路由权限控制 - 创建 LoginPage 组件实现登录界面和逻辑 - 集成本地登录验证到 authSlice 状态管理 - 配置路由表添加登录页面和保护路由 - 实现自动跳转到登录页面的重定向逻辑
22 lines
660 B
TypeScript
22 lines
660 B
TypeScript
import React from 'react';
|
|
import { Navigate, useLocation, Outlet } from 'react-router';
|
|
import { useAppSelector } from '@/store/hooks';
|
|
|
|
interface ProtectedRouteProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
|
const { isAuthenticated } = useAppSelector((state) => state.auth);
|
|
const location = useLocation();
|
|
|
|
if (!isAuthenticated) {
|
|
// Redirect to the login page, but save the current location they were trying to go to
|
|
return <Navigate to="/login" state={{ from: location }} replace />;
|
|
}
|
|
|
|
return children ? <>{children}</> : <Outlet />;
|
|
};
|
|
|
|
export default ProtectedRoute;
|