# 安装 pip install djangorestframework-jwt
From rest_framework_jwt.authentication import JSONWebTokenAuthentication
Settings.py
INSTALLED_APPS = [
  '''
  'rest_framework.authtoken',
  '''
]
################### 2、配置jwt验证 ######################
REST_FRAMEWORK = {
  # 身份认证
  'DEFAULT_AUTHENTICATION_CLASSES': (
    'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
    'rest_framework.authentication.SessionAuthentication',
    'rest_framework.authentication.BasicAuthentication',
  ),
}
import datetime

JWT_AUTH = {
  'JWT_AUTH_HEADER_PREFIX': 'JWT',
  'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
}
AUTH_USER_MODEL='app.User' # 指定使用APP中的 model User进行验证

from rest_framework_jwt.views import obtain_jwt_token # 验证密码后返回token
urlpatterns = [
  re_path(r'v1/login/$', obtain_jwt_token,name='login'), # 用户登录后返回token
]

import Axios from 'axios'
import { Toast } from 'vant';
import URLS from '../../config/urls'
 
//1、使用自定义配置新建一个 axios 实例
const instance = Axios.create({
  baseURL: URLS.API_URL,
  responseType: 'json',
});
 
//2、添加请求拦截器：每次发送请求就会调用此拦截器，添加认证token
instance.interceptors.request.use(
  config => {
    //发送请求前添加认证token，
    console.log(localStorage.getItem('token'))
    config.headers.Authorization = localStorage.getItem('token');  # 获取token
    // config.headers.Authorization = sessionStorage.getItem('token')
    return config
  },
  err => {
    return Promise.reject(err)
  });
 
// 3、响应拦截器
instance.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          router.replace({
            path: '/login',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          Toast({
            message: '登录过期，请重新登录',
            duration: 1000,
            forbidClick: true
          });
          // 清除token
          localStorage.removeItem('token');
          store.commit('loginSuccess', null);
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
          break;
        // 404请求不存在
        case 404:
          Toast({
            message: '网络请求不存在',
            duration: 1500,
            forbidClick: true
          });
          break;
        // 其他错误，直接抛出错误提示
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          });
      }
      return Promise.reject(error.response);
    }
  }
);
 
export default instance