了解 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 触发成功回调,其他则触发失败的回调函数
相关推荐
腾讯云云开发24 分钟前
小程序数据库权限管理,一看就会!——CloudBase新手指南
前端·数据库·微信小程序
多则惑少则明1 小时前
Vue开发系列——自定义组件开发
前端·javascript·vue.js
用户250694921611 小时前
next框架打包.next文件夹部署
前端
程序猿小蒜1 小时前
基于springboot的校园社团信息管理系统开发与设计
java·前端·spring boot·后端·spring
一叶难遮天1 小时前
开启RN之旅——前端基础
前端·javascript·promise·js基础·es6/ts·npm/nrm
申阳1 小时前
Day 4:02. 基于Nuxt开发博客项目-整合 Inspira UI
前端·后端·程序员
程序猿_极客1 小时前
【期末网页设计作业】HTML+CSS+JavaScript 猫咪主题网站开发(附源码与效果演示)
前端·css·html·课程设计·网页设计作业
IT古董1 小时前
【前端】从零开始搭建现代前端框架:React 19、Vite、Tailwind CSS、ShadCN UI 完整实战教程-第1章:项目概述与技术栈介绍
前端·react.js·前端框架
有点笨的蛋1 小时前
从零搭建小程序首页:新手也能看懂的结构解析与实战指南
前端·微信小程序
爱宇阳1 小时前
Vue3 前端项目 Docker 容器化部署教程
前端·docker·容器