如何前端存token,后端获取token

Token是一种用于身份验证和授权的令牌(Token)机制,在网络通信中广泛使用。它是一个字符串,代表着用户的身份或权限,用于验证用户在系统中的访问权限。

在身份验证方面,Token通常用于替代传统的基于会话的身份验证机制,如使用Cookie+Session的方式。使用Token进行身份验证的好处是,服务器不需要在内存中保存用户的会话信息,因为Token本身包含了所有验证所需的信息。这使得Token在分布式系统或无状态的API接口中非常适用。Token通常由服务器生成,并在用户登录或进行身份验证时发放给客户端。客户端将Token存储起来,并在后续的请求中将Token作为身份认证的凭证发送给服务器。服务器接收到Token后,可以通过验证Token的有效性来确认用户的身份和权限。常见的Token类型包括JWT(JSON Web Token)、OAuth 2.0的访问令牌(Access Token)、Bearer Token等。

在前端,使用浏览器提供的 Web Storage(如LocalStorage或SessionStorage)或者使用HTTP Cookie来存储Token。

  1. 使用LocalStorage:

    javascript 复制代码
    // 存储Token到LocalStorage
    localStorage.setItem('token', 'your_token_value');
    
    // 从LocalStorage读取Token
    const token = localStorage.getItem('token');
  2. 使用SessionStorage:

    javascript 复制代码
    // 存储Token到SessionStorage
    sessionStorage.setItem('token', 'your_token_value');
    
    // 从SessionStorage读取Token
    const token = sessionStorage.getItem('token');
  3. 使用HTTP Cookie:

    javascript 复制代码
    // 存储Token到Cookie
    document.cookie = 'token=your_token_value; expires=...; path=/';
    
    // 从Cookie读取Token
    const cookies = document.cookie.split(';');
    let token = null;
    cookies.forEach(cookie => {
      const [name, value] = cookie.trim().split('=');
      if (name === 'token') {
        token = value;
      }
    });

在前端进行Token验证时,通过在请求头中添加Authorization字段,并将Token值作为其值传递给后端。在后端的代码中,使用@RequestHeader("Authorization") String token来获取请求头中的Token值进行验证和处理。

在Spring Boot后端中,使用@RequestHeader注解来接收前端传递的Token值。

示例:

java 复制代码
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class YourController {

    @GetMapping("/your-endpoint")
    public String yourEndpoint(@RequestHeader("Authorization") String token) {
 		// 处理
        return "Success";
    }
}

使用@RequestHeader("Authorization")注解将前端传递的Token值绑定到token参数上。然后,可以在方法体中使用token进行验证和处理。

相关推荐
小七-七牛开发者1 天前
周一上线 | SpaceX 收购 Cursor、支付宝进入 AI 时代、DeepSeek 完成 500 亿元融资
ai·agent·token·glm·智谱·claudecode·ai coding·周一上线
写点啥呢7 天前
GLM HUD用量实时显示
claude·token·hud·glm
理人综艺好会10 天前
双Token机制在实际项目中的应用与实践
中间件·token
XLYcmy11 天前
一个基于 Python 的轻量级 LLM(大语言模型)API 客户端程序:从API交互到LLM应用架构
服务器·python·ai·llm·prompt·agent·token
小七-七牛开发者13 天前
AI Agent 的 4 个工程关键词:Prompt、Context、Loop、Harness 到底是什么?
ai·大模型·agent·token·context·loop·codex·harness
ZorChi15 天前
AI API 调用优化实战:统一入口与超时处理指南
人工智能·aigc·接口·api·agent·token·中转站
极连AI17 天前
国产大模型譬如DeepSeek接入codex教程分享
人工智能·gpt·chatgpt·api·token·极连ai·zovelox.com
摸鱼同学20 天前
LLM 是什么?从 API 调用到 Token 机制
ai·大模型·llm·token·claudecode
阿昌喜欢吃黄桃21 天前
大模型常见参数学习笔记
人工智能·ai·llm·prompt·token
abigale0322 天前
LangChain 实践4: 7个人AI助手全栈项目:完整拆解+分阶段开发指南
缓存·langchain·prompt·token·rag·lcel