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

这篇具有很好参考价值的文章主要介绍了如何前端存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:

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

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

    // 存储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值。
示例:

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进行验证和处理。文章来源地址https://www.toymoban.com/news/detail-808943.html

到了这里,关于如何前端存token,后端获取token的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 后端请求的时候返回的状态码有几种,代表什么意思

             2xx表示成功处理了请求,200请求已完成,202服务器接收未处理,204、205:服务器处理了但是没有任何返回,206:处理了部分get请求         3xx请求被重定向,需要进一步操作         4xx:请求码出错影响了请求,400:服务器不理解,401:要求身份验证,404:

    2024年02月12日
    浏览(35)
  • uniapp中token操作:存储、获取、失效处理。

    实现代码 存储token: uni.setStorageSync(\\\'token\\\', res.data.result); 获取token: uni.getStorageSync(\\\'token\\\'); 清除token: uni.setStorageSync(\\\'token\\\', \\\'\\\'); 应用场景 在登录操作中,保存token 请求头中获取token携带 响应拦截器中处理token失效

    2024年02月13日
    浏览(34)
  • 使用PostMan测试接口的时候如何在Header中添加token验证

    由于业务要求,每次接口请求都是post方式,且头部需要在自定义字段中定义token字段 在Authorization中添加APIKey 然后添加token和token的值,因为这里只是简单的开发个测试接口,所以不能通过登录验证去自动生成动态token,然后将token的返回值赋于Header中的token,所以就直接指定一

    2024年02月11日
    浏览(55)
  • 前端数据存储系列(Cookie、Session、localStorage、sessionStorage、Token)

    简述: Session比Cookie安全,Session是存储在服务器端的,Cookie是存储在客户端的 背景: HTTP 是无状态协议,说明它不能以状态来区分和管理请求和响应。也就是说,服务器单从网络连接上无从知道客户身份。 于是想说客户端们颁发一个通行证吧,每人一个,无论谁访问都必须

    2023年04月24日
    浏览(42)
  • vue 前端登录获取token后添加到cookie,并使用token获取其他数据(添加到请求头中)

    1.登录获取到token存到cookie中   这里我的cookie设置为一天失效 cookie.js代码如下 main.js导入到全局使用 request.js请求头添加token   最后浏览器可查看到   并且下一次发请求时候请求参数中可查看到

    2024年02月15日
    浏览(41)
  • 前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

    Token是服务端生成的一串字符串,当用户第一次登陆成功后,服务器会生成一个token,并将其返回给客户端。 当用户再次向服务器请求数据时,只需要携带着token请求数据即可,无需再次登陆用户名和密码 目的 通过token做一层数据拦截,可以减少数据库请求次数,减缓服务器

    2024年02月02日
    浏览(35)
  • 在springBoot中使用JWT实现1.生成token,2.接收前端token进行身份认证,3.通过token获取对象信息

    第一步:引入依赖 第二步:创建工具类 在until包下创建TokenUntil类,用于生成token 利用id,和password作为参数生成token JWt为这个包下的对象 第三步:token使用 在向前端返回的数据对象中添加token属性  是serve层中调用工具类方法将生成的token放到返回的数据中 注意:这里获取到

    2024年02月04日
    浏览(65)
  • Springboot集成阿里云对象存储oss-前端-后端完整实现

    1.注册阿里云并购买套餐流量包 2.点击套餐买个流量包,5元半年40g,还挺便宜    3.购买后进入管理控制台-点开对象存储oss 4.点开bucket创建,我已经创建好了    5.需要复制每个人的 外网访问,这个到时候需要在springboot项目中配置  6.点击个人头像创建每个人自己的key    

    2024年02月05日
    浏览(44)
  • 前端发送请求获取后端文件,并且前端实现下载文件功能

    最近遇到一个需求,就是前端发送post请求获取后端的excel文件,并且前端实现下载导出到本地的功能。 前端页面就长上面那样,一个批量导出功能,用户勾选之后,前端通过接口把id和其他的参数传给后端,接口调用方法这里需要注意的是,这里必须设置responseType: ‘blob’

    2024年02月09日
    浏览(44)
  • 微信小程序登录+获取手机号码(前端+后端)

    上面这张是微信小程序官方原图,登录流程如上图所示,下面一步步进行以及说一下碰到的坑。 1.wx.login()获取code         调用微信小程序官方提供的方法获取code提供给后端用以换取session_key、openid。         注意:code只能使用一次就会失效,且有效期为5分钟 2.后端收到

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包