如何在Core UI React中保护仪表盘路由

我来帮你搞定Core UI React仪表盘的路由保护，其实思路很清晰——我们需要一个路由守卫组件，用来拦截未登录用户访问受保护的页面，下面分步骤来实现：

1. 创建ProtectedRoute路由守卫组件 #

首先在项目里新建src/components/ProtectedRoute.js文件，这个组件会负责检查用户登录状态，未登录就跳转到登录页：

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
// 后面会用到Context管理登录状态，先提前导入
import { AuthContext } from '../contexts/AuthContext';

const ProtectedRoute = ({ component: Component, ...rest }) => {
  // 两种判断登录状态的方式，选一种就行
  // 方式一：简单场景用localStorage直接判断
  // const isAuthenticated = localStorage.getItem('authToken') !== null;

  // 方式二：复杂应用用React Context管理状态（推荐）
  const { isAuthenticated } = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" /> // 未登录时强制跳转到登录页
        )
      }
    />
  );
};

export default ProtectedRoute;

2. 配置登录状态管理（可选但推荐） #

如果你的应用需要在多个组件里同步登录状态，建议用React Context来集中管理，这样比直接操作localStorage更灵活：

2.1 创建AuthContext #

新建src/contexts/AuthContext.js：

import React, { createContext, useState, useEffect } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // 页面加载时自动检查本地存储的登录token
  useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (token) setIsAuthenticated(true);
  }, []);

  // 登录方法：保存token并更新状态
  const login = (token) => {
    localStorage.setItem('authToken', token);
    setIsAuthenticated(true);
  };

  // 登出方法：移除token并重置状态
  const logout = () => {
    localStorage.removeItem('authToken');
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

2.2 在App.js中包裹路由 #

修改src/App.js，让整个应用都能访问到AuthContext的状态：

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { renderRoutes } from 'react-router-config';
import { AuthProvider } from './contexts/AuthContext';
import routes from './routes';

const history = createBrowserHistory();

const App = () => (
  <AuthProvider>
    <Router history={history}>
      {renderRoutes(routes)}
    </Router>
  </AuthProvider>
);

export default App;

3. 修改routes.js，保护目标路由 #

回到你的routes.js，先导入ProtectedRoute和登录组件，然后把需要保护的路由（比如仪表盘、主题设置、基础组件页面等）用ProtectedRoute包裹：

3.1 导入必要组件 #

在routes.js顶部添加：

import ProtectedRoute from './components/ProtectedRoute';
import Login from './views/Login'; // 导入你的登录组件，没有的话先创建一个简单的登录页

3.2 更新路由配置 #

把需要保护的路由替换成如下格式，以Dashboard为例：

// 原来的非保护路由
// { path: '/dashboard', name: 'Dashboard', component: Dashboard },

// 修改后的保护路由
{ 
  path: '/dashboard', 
  name: 'Dashboard', 
  component: (props) => <ProtectedRoute {...props} component={Dashboard} /> 
},

你可以批量修改所有需要保护的路由（比如/theme、/base、/buttons等），最后记得添加登录页的路由：

// 在routes数组末尾添加登录路由
{ path: '/login', name: 'Login', component: Login },

4. 实现登录和登出逻辑 #

在你的登录组件里，调用登录接口成功后，执行以下代码完成登录跳转：

import React, { useContext } from 'react';
import { AuthContext } from '../contexts/AuthContext';

const Login = (props) => {
  const { login } = useContext(AuthContext);

  const handleLogin = async () => {
    // 这里替换成你的登录接口调用逻辑
    const response = await fetch('/api/login', { /* 请求参数 */ });
    const { token } = await response.json();
    
    // 保存token并更新登录状态
    login(token);
    // 跳转到仪表盘
    props.history.push('/dashboard');
  };

  return (
    // 这里写你的登录表单UI，用Core UI的表单组件即可
    <div>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Login;

在导航栏的登出按钮里，添加登出逻辑：

import React, { useContext } from 'react';
import { AuthContext } from '../contexts/AuthContext';

const Navbar = (props) => {
  const { logout } = useContext(AuthContext);

  const handleLogout = () => {
    logout();
    props.history.push('/login');
  };

  return (
    <nav>
      {/* 其他导航项 */}
      <button onClick={handleLogout}>登出</button>
    </nav>
  );
};

额外提示 #

• 如果你的后端用JWT认证，记得在所有请求的请求头里带上Authorization: Bearer ${token}
• 可以给ProtectedRoute扩展权限判断逻辑，比如只允许管理员访问某些路由
• 登录页可以用Core UI的表单组件快速搭建，保持和仪表盘一致的风格

内容的提问来源于stack exchange，提问作者Srikanth Gowda