JWT 身份认证 鉴权

大纲链接 §

[toc]

1. 使用JWT鉴权 ⇧

  • 了解Session认证的局限性以及JWT的概念 ⇧
  • 了解JWT的工作原理 ⇧
  • 了解JWT的三个组成部分以及各自代表的含义 ⇧
  • 了解JWT的使用方式 ⇧

2. 项目中的实践 axios中应用JWT 身份认证 ⇧ 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import axios, {AxiosRequestConfig, Method} from 'axios';
import {message} from 'ant-design-vue';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = 'https://blog-server.hunger-valley.com';

const errorMsg = (msg: string) => {
  message.error(msg);
};

export default function request(url: string, type: Method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    // 配置axios选项参数
    const option: AxiosRequestConfig = {
      url,
      method: type
    };

    // 配置数据
    type.toUpperCase() === 'GET'
      ? option.params = data // 查询参数方式 传递数据
      : option.data = data; // 其他请求方法 提交数据

    // 携带 localStorage中存储的 JWT
    if (localStorage.token) {
      axios.defaults.headers.common['Authorization'] = localStorage.token;
    }

    // 发起请求
    axios(option)
      .then(res => {...})
      .catch(err => {...});
  });
}

在之后接口封装的 API中，删除 localStorage.token

参考文章 ⇧

  • 无

相关文章 ⇧

  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名