JWT从0到1，小白入门（JWT在vue前端中的使用）

在Vue前端中使用JWT通常涉及以下步骤：

1. 安装axios和vue-axios库来处理HTTP请求。
2. 创建一个Vue插件来处理JWT的自动附加到请求头。
3. 在Vue应用中使用axios发送请求，并通过插件附加JWT。

以下是实现这些步骤的示例代码：

首先，安装所需库：

npm install axios vue-axios --save

然后，创建一个Vue插件（jwt-plugin.js）来处理JWT：

import axios from 'axios';
 
const jwtPlugin = ({ getToken }) => {
  axios.interceptors.request.use(config => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  }, error => {
    return Promise.reject(error);
  });
};
 
export default jwtPlugin;

在Vue应用中使用这个插件：

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import jwtPlugin from './jwt-plugin'; // 引入插件
 
// 获取token的函数，通常从本地存储如localStorage或vuex状态获取
const getToken = () => localStorage.getItem('jwt-token');
 
// 使用插件
Vue.use(VueAxios, axios);
axios.defaults.baseURL = 'https://api.example.com';
Vue.use(jwtPlugin, { getToken });
 
// 之后在组件中可以这样使用axios发送请求
new Vue({
  // ...
  created() {
    this.axios.get('/protected-endpoint')
      .then(response => {
        // 处理响应
      })
      .catch(error => {
        // 处理错误
      });
  }
});

在上述代码中，getToken函数用于获取JWT，它通常从本地存储（如localStorage）中读取。插件会自动将获取到的JWT添加到每个请求的Authorization头部。

这样，你就可以在Vue前端应用中方便地使用JWT进行API请求了。