当前位置：首页 > React

react如何实现用户登录权限

2026-01-25 23:23:55React

实现用户登录权限的基本流程

在React中实现用户登录权限通常涉及前端路由控制、状态管理以及与后端API的交互。以下是核心步骤：

路由保护与权限控制

使用react-router-dom的Navigate组件和路由守卫：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = ({ isAuthenticated }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

// 在路由配置中使用
<Route element={<PrivateRoute isAuthenticated={isAuth} />}>
  <Route path="/dashboard" element={<Dashboard />} />
</Route>

状态管理方案

推荐使用Context API或Redux存储用户认证状态：

// Context示例
const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
    localStorage.setItem('token', userData.token);
  };

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

JWT令牌处理

登录成功后存储令牌并设置请求拦截：

// axios拦截器示例
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

持久化登录状态

通过useEffect检查本地存储的令牌：

useEffect(() => {
  const token = localStorage.getItem('token');
  if (token) {
    // 验证令牌有效性（需调用API）
    verifyToken(token).then(user => setUser(user));
  }
}, []);

权限分级控制

基于角色的访问控制(RBAC)实现：

const hasPermission = (requiredRole) => {
  const userRole = currentUser?.role;
  return requiredRole.includes(userRole);
};

// 使用示例
{hasPermission(['admin']) && <AdminPanel />}

退出登录处理

清除状态和本地存储：

const logout = () => {
  setUser(null);
  localStorage.removeItem('token');
  navigate('/login');
};

错误边界处理

捕获未授权请求错误：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      logout();
    }
    return Promise.reject(error);
  }
);