当前位置：首页 > React

react如何获取token

2026-02-12 08:38:39React

获取 Token 的方法

在 React 中获取 Token 通常涉及与后端 API 的交互（如登录验证）或从本地存储（如 localStorage、sessionStorage）中读取。以下是几种常见场景的实现方式：

从 API 获取 Token

通过发送 HTTP 请求（如登录接口）获取 Token，并将 Token 存储到本地：

import React, { useState } from 'react';
import axios from 'axios';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://api.example.com/login', {
        email,
        password,
      });
      const { token } = response.data;
      localStorage.setItem('authToken', token); // 存储到 localStorage
      console.log('Token:', token);
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
};

从本地存储读取 Token

从 localStorage 或 sessionStorage 中读取已保存的 Token：

import React, { useEffect } from 'react';

const Dashboard = () => {
  useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (!token) {
      // 跳转到登录页
      window.location.href = '/login';
    } else {
      console.log('Stored Token:', token);
    }
  }, []);

  return <div>Protected Content</div>;
};

使用 Context 全局管理 Token

通过 React Context 在组件间共享 Token 状态：

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

const AuthContext = createContext();

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

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

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

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

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

在组件中使用：

const Profile = () => {
  const { token, logout } = useAuth();

  return (
    <div>
      <button onClick={logout}>Logout</button>
      {token && <p>Token: {token}</p>}
    </div>
  );
};

从 URL 参数获取 Token

适用于 OAuth 回调等场景，从 URL 中解析 Token：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const OAuthCallback = () => {
  const location = useLocation();

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const token = params.get('token');
    if (token) {
      localStorage.setItem('authToken', token);
    }
  }, [location]);

  return <div>Processing OAuth...</div>;
};