当前位置：首页 > React

react如何鉴定

2026-01-07 12:54:41React

React 鉴权方法

基于路由的鉴权

在 React 中，可以通过封装路由组件实现鉴权。使用 react-router-dom 检查用户是否登录，未登录则跳转至登录页。

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

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

// 使用示例
<Route path="/dashboard" element={<PrivateRoute element={<Dashboard />} isAuthenticated={userLoggedIn} />} />

使用 Context 管理用户状态

通过 React Context 存储用户认证状态，避免频繁传递 props。

import { createContext, useContext } from 'react';

const AuthContext = createContext();

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

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

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

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

export const useAuth = () => useContext(AuthContext);

结合 JWT 验证

前端存储 JWT（如 localStorage），并在请求头中携带 Token 进行后端验证。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 使用示例
api.get('/protected-route').then(response => console.log(response.data));

高阶组件（HOC）封装

通过高阶组件包裹需要鉴权的组件，统一处理权限逻辑。

const withAuth = (Component) => {
  return (props) => {
    const { user } = useAuth();
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} />;
  };
};

// 使用示例
const ProtectedProfile = withAuth(Profile);

权限角色控制

根据用户角色动态渲染界面，结合后端返回的权限数据过滤可访问内容。

const checkPermission = (user, requiredRole) => {
  return user?.roles?.includes(requiredRole);
};

const AdminPanel = () => {
  const { user } = useAuth();
  if (!checkPermission(user, 'admin')) return <div>无权访问</div>;
  return <div>管理员面板</div>;
};

服务端渲染（SSR）鉴权

在 Next.js 等框架中，通过 getServerSideProps 在服务端验证权限。

export async function getServerSideProps(context) {
  const { req } = context;
  const token = req.cookies.token;
  if (!token) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  return { props: {} };
}