react如何获取token
获取 Token 的方法
在 React 中获取 Token 通常涉及与后端 API 的交互，例如登录认证或第三方服务（如 OAuth）。以下是几种常见场景的实现方法：
通过登录表单提交获取 Token
在用户提交登录表单后，将用户名和密码发送到后端 API，接收返回的 Token 并存储。
import React, { useState } from 'react';
import axios from 'axios';
const LoginForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('https://api.example.com/login', {
username,
password,
});
const token = response.data.token;
localStorage.setItem('token', token); // 存储 Token
console.log('Token:', token);
} catch (error) {
console.error('Login failed:', error);
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Username"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
<button type="submit">Login</button>
</form>
);
};通过 OAuth 授权获取 Token
使用第三方 OAuth 服务（如 Google、GitHub）获取 Token，通常需要重定向到授权页面并回调处理 Token。
import React from 'react';
const OAuthLogin = () => {
const handleOAuthRedirect = () => {
const clientId = 'YOUR_CLIENT_ID';
const redirectUri = encodeURIComponent('http://localhost:3000/callback');
const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=token&scope=email`;
window.location.href = authUrl;
};
return <button onClick={handleOAuthRedirect}>Login with Google</button>;
};在回调页面中解析 URL 中的 Token：
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const OAuthCallback = () => {
const location = useLocation();
useEffect(() => {
const hash = location.hash.substring(1);
const params = new URLSearchParams(hash);
const token = params.get('access_token');
if (token) {
localStorage.setItem('token', token);
console.log('OAuth Token:', token);
}
}, [location]);
return <div>Processing OAuth callback...</div>;
};从本地存储读取 Token
如果 Token 已存储在 localStorage 或 sessionStorage 中，可以直接读取：
const token = localStorage.getItem('token');
if (token) {
console.log('Stored Token:', token);
}通过 HTTP 请求头传递 Token
在后续 API 请求中，将 Token 添加到请求头：
axios.get('https://api.example.com/protected', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});使用 Context 或状态管理共享 Token
通过 React Context 或状态管理工具（如 Redux）全局共享 Token：
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);在组件中使用：
const { token, login, logout } = useAuth();注意事项
- 安全性：避免将 Token 暴露在客户端代码中，确保使用 HTTPS。
- 存储方式：根据需求选择
localStorage（持久化）或sessionStorage（会话级）。 - 过期处理：检查 Token 有效期并实现刷新逻辑。
