当前位置：首页 > React

react如何附带tokens

2026-01-23 18:24:28React

在React中附带Tokens的方法

在React应用中附带Tokens（如JWT）通常用于身份验证和授权。以下是几种常见的方法：

使用Axios拦截器

Axios拦截器可以在请求发出前自动附加Tokens。

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;
});

export default api;

使用Fetch API

Fetch API可以通过手动设置Headers来附带Tokens。

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

使用React Context

通过React Context全局管理Tokens，避免重复代码。

import React, { createContext, useContext } from 'react';

const AuthContext = createContext();

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

  const value = {
    token,
  };

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

export const useAuth = () => {
  return useContext(AuthContext);
};

使用高阶组件（HOC）

高阶组件可以包装需要附带Tokens的组件。

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

export default withAuth;

使用自定义Hook

自定义Hook可以简化Tokens的管理和使用。

import { useState, useEffect } from 'react';

const useToken = () => {
  const [token, setToken] = useState(localStorage.getItem('token'));

  useEffect(() => {
    localStorage.setItem('token', token);
  }, [token]);

  return [token, setToken];
};

export default useToken;