当前位置：首页 > React

react如何附带tokens

2026-02-26 08:20:27React

在React中附带tokens（如认证令牌）通常用于API请求的身份验证。以下是几种常见的方法：

使用axios发送请求附带token

通过axios的拦截器或请求配置，可以在请求头中添加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实例发送请求
api.get('/user').then(response => console.log(response));

使用fetch API附带token

fetch API可以通过手动设置请求头来附带token：

fetch('https://api.example.com/user', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`,
    'Content-Type': 'application/json',
  },
})
.then(response => response.json())
.then(data => console.log(data));

封装自定义hook

可以创建一个自定义hook来统一处理附带token的逻辑：

import { useState, useEffect } from 'react';

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
      });
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
}

使用context管理token

通过React的Context API全局管理token，避免重复从存储中读取：

import { createContext, useContext } from 'react';

const AuthContext = createContext();

function AuthProvider({ children }) {
  const token = localStorage.getItem('token');

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

function useAuth() {
  return useContext(AuthContext);
}

// 在组件中使用
function ProtectedComponent() {
  const { token } = useAuth();
  // 使用token发送请求
}

使用高阶组件（HOC）

对于类组件，可以通过高阶组件自动注入token：

react如何附带tokens

function withAuth(WrappedComponent) {
  return function(props) {
    const token = localStorage.getItem('token');
    return <WrappedComponent {...props} token={token} />;
  };
}

// 使用高阶组件
class UserProfile extends React.Component {
  componentDidMount() {
    // 使用this.props.token发送请求
  }
}

export default withAuth(UserProfile);