了解 token,以及使用token作为访问权限的令牌

目录

[1. token的介绍和权限访问控制](#1. token的介绍和权限访问控制)

[1.1. token的概念](#1.1. token的概念)

[1.2. token的创建](#1.2. token的创建)

[1.3. token的作用](#1.3. token的作用)

[2. token的使用](#2. token的使用)

[2.1. 目的](#2.1. 目的)

[2.2. 步骤](#2.2. 步骤)

[2.3. 注意](#2.3. 注意)

[3. 通过token 获取个人资料](#3. 通过token 获取个人资料)

[3.1. 语法](#3.1. 语法)

[3.2. 问题](#3.2. 问题)

[3.3. 解决](#3.3. 解决)

[4. axios请求拦截器](#4. axios请求拦截器)

[4.1. axios 请求拦截器介绍](#4.1. axios 请求拦截器介绍)

[4.2. axios 请求拦截器,什么时候使用?](#4.2. axios 请求拦截器,什么时候使用?)

[5. axios响应拦截器](#5. axios响应拦截器)

[5.1. axios 响应拦截器介绍](#5.1. axios 响应拦截器介绍)

[5.2. axios 响应拦截器,什么时候触发成功/失败的回调函数?](#5.2. axios 响应拦截器,什么时候触发成功/失败的回调函数?)


1. token的介绍和权限访问控制

1.1. token的概念

  • 访问权限的令牌,本质上是一串字符串

1.2. token的创建

  • 正确登录后,由后端签发并返回

1.3. token的作用

  • 判断是否有登录状态等,控制访问权限

2. token的使用

2.1. 目的

  • 只有登录状态,才可以访问内容页面

2.2. 步骤

  • 在 utils/auth.js 中判断无 token 令牌字符串,则强制跳转到登录页
  • 在登录成功后,保存 token 令牌字符串到本地,再跳转到首页

2.3. 注意

  • 前端只能判断 token 的有无
  • 后端通过解密可以提取 token 字符串的原始信息,判断有效性

3. 通过token 获取个人资料

3.1. 语法

  • axios 可以在 headers 选项传递请求头参数

3.2. 问题

  • 很多页面,都需要获取访问权限
  • 很多接口,都需要携带 token 令牌字符串

3.3. 解决

  • 在请求拦截器统一设置公共 headers 选项

4. axios请求拦截器

4.1. axios 请求拦截器介绍

  • 发起请求之前,触发的配置函数,对请求参数进行额外配置

4.2. axios 请求拦截器,什么时候使用?

  • 有公共配置和设置时,统一设置在请求拦截器中

5. axios响应拦截器

5.1. axios 响应拦截器介绍

  • 响应回到 then/catch 之前,触发的拦截函数,对响应结果统一处理

例如:身份验证失败,统一判断并做处理

5.2. axios 响应拦截器,什么时候触发成功/失败的回调函数?

  • 状态为 2xx 触发成功回调,其他则触发失败的回调函数
相关推荐
迷路的小绅士5 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
小希爸爸14 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师30 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭31 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码38 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger44 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话44 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时44 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳1 小时前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子1 小时前
深入解析 iframe
前端