axios拦截器,实现token认证和路由守卫

本文详细介绍了在JavaScript应用中如何使用axios拦截器实现JWT(JSON Web Token)认证,包括存储token、设置请求头、路由权限校验等步骤,确保数据安全并根据页面需求灵活控制认证流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

token的引入:

  • token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,token便应运而生。

token的定义:

  • token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个token便将此token返回给客户端,以后客户端只需带上这个token前来请求数据即可,无需再次带上用户名和密码。

使用token的目的:

  • 简单地说,token的使用就是为了数据安全,前台是通过接口路径(URL)的调用来获取数据的,如果恶意的第三方知道了某一个接口路径,那么,他便可以直接通过接口路径在网页上直接获取该接口的所有数据信息。如果添加了token,类似于这种恶意的行为便不会产生。

token的验证流程:

  1. 客户端使用用户名跟密码请求登录
  2. 服务端收到请求,去验证用户名与密码
  3. 验证成功后,服务端会签发一个 token,再把这个 token 发送给客户端
  4. 客户端收到 Ttoken 以后可以把它存储起来,比如放在 sessionStorage 里或者 localStorage 里
  5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 token
  6. 服务端收到请求,然后去验证客户端请求里面带着的 token,如果验证成功,就向客户端返回请求的数据

在这里插入图片描述

axios的[拦截器] :

// Add a request interceptor
axios.interceptors.request.use(function (config) {
   
   
    // Do something before request is sent
    return config;
  }, function (error) {
   
   
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
   
   
    // Do something with response data
    return response;
  }, function (error) {
   
   
    // Do something with response error
    return Promise.reject(error);
  })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值