了解 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 触发成功回调,其他则触发失败的回调函数
相关推荐
乐多_L27 分钟前
使用vue3框架vue-next-admin导出表格excel(带图片)
前端·javascript·vue.js
南望无一41 分钟前
React Native 0.70.x如何从本地安卓源码(ReactAndroid)构建
前端·react native
Mike_188702783511 小时前
1688代采下单API接口使用指南:实现商品采集与自动化下单
前端·python·自动化
鲨鱼辣椒️面1 小时前
HTML视口动画
前端·html
一小路一1 小时前
Go Web 开发基础:从入门到实战
服务器·前端·后端·面试·golang
堇舟1 小时前
HTML第一节
前端·html
纯粹要努力1 小时前
前端跨域问题及解决方案
前端·javascript·面试
小刘不知道叫啥1 小时前
React源码揭秘 | 启动入口
前端·react.js·前端框架
kidding7231 小时前
uniapp引入uview组件库(可以引用多个组件)
前端·前端框架·uni-app·uview
合法的咸鱼1 小时前
uniapp 使用unplugin-auto-import 后, vue文件报红问题
前端·vue.js·uni-app