当前位置：首页 > React

react如何附带tokens

2026-03-31 01:28:16React

在React中附带Tokens的方法

使用HTTP请求库（如axios或fetch）时，将tokens附加到请求头中。以axios为例，可以在请求拦截器中设置Authorization头：

import axios from 'axios';

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

使用Context API传递Tokens

通过React的Context API全局管理tokens，避免手动传递。创建一个AuthContext：

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

const AuthContext = createContext();

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

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

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

在自定义Hook中封装Token逻辑

创建一个自定义Hook处理token的获取和设置：

import { useState } from 'react';

export const useToken = () => {
  const [token, setTokenInternal] = useState(() => {
    return localStorage.getItem('token');
  });

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

  return [token, setToken];
};

使用高阶组件传递Tokens

创建高阶组件包装需要token的组件：

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

在路由保护中使用Tokens

使用React Router保护需要认证的路由：

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

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      localStorage.getItem('token') ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

处理Token过期

实现token刷新机制：

react如何附带tokens

axios.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      return axios.post('/refresh-token', {
        refreshToken: localStorage.getItem('refreshToken')
      }).then(res => {
        localStorage.setItem('token', res.data.token);
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.token;
        return axios(originalRequest);
      });
    }
    return Promise.reject(error);
  }
);