当前位置：首页 > React

在react如何加token

2026-01-24 09:58:12React

在 React 中添加 Token 的方法

使用 localStorage 或 sessionStorage 存储 Token

Token 可以存储在浏览器的 localStorage 或 sessionStorage 中，方便在页面刷新后仍然保持登录状态。以下是示例代码：

// 存储 Token
localStorage.setItem('token', 'your_token_here');

// 获取 Token
const token = localStorage.getItem('token');

// 删除 Token
localStorage.removeItem('token');

在请求头中添加 Token

在发送 HTTP 请求时，通常需要在请求头中添加 Token。可以使用 axios 或 fetch 实现：

import axios from 'axios';

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

// 发送请求
axios.get('/api/data').then(response => {
  console.log(response.data);
});

使用 Context API 或 Redux 全局管理 Token

通过 React 的 Context API 或 Redux 全局管理 Token，方便在组件间共享状态：

// 使用 Context API
import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [token, setToken] = useState(localStorage.getItem('token'));

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

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

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

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

在路由中验证 Token

使用 react-router-dom 进行路由保护，确保只有携带有效 Token 的用户才能访问特定页面：

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

const PrivateRoute = ({ children }) => {
  const { token } = useAuth();
  return token ? children : <Navigate to="/login" />;
};

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

在登录时获取并存储 Token

在登录表单提交后，获取 Token 并存储：

const handleLogin = async (credentials) => {
  try {
    const response = await axios.post('/api/login', credentials);
    const { token } = response.data;
    localStorage.setItem('token', token);
    // 更新全局状态或重定向
  } catch (error) {
    console.error('Login failed:', error);
  }
};

处理 Token 过期或失效

Token 可能过期或失效，需要在前端处理这种情况：

在react如何加token

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      // 跳转到登录页或显示提示
    }
    return Promise.reject(error);
  }
);