トークンのタイムアウト問題を解決する

1. トークン タイムアウトの問題は、主にトークンの失敗の問題が原因です。エラーメッセージを確認すると、ステータス コード 401
が表示されていることがわかります。その後、応答インターセプターで応答を選択します。具体的な実装手順は次のとおりです。続く

      // 401:什么意思？无权限
        1：删除token和用户信息
        2:提示错误信息跳转登陆页

1. トークンとユーザー情報を削除する

ミューテーションで状態をクリアする
このステップを実行する理由は、vuex が主にパブリック データを保存するために使用され、状態がパブリック データを定義し、それを変更するためにミューテーションを使用するためです
。

特定のコード
パスは次のとおりです: store/modules/user.js

    LOGOUT(state) {
    
    
      state.token = ''
      state.userInfo = ''
    }

2: ランディング ページにジャンプするためのプロンプト エラー メッセージ

キーコードのパスはutils/request.js
です。

    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

なぜ401を判断基準とするのか

  (error) => {
    
    
    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

    // console.dir(error);
    return Promise.reject(error)
  })

ここにステータス コードの質問を追加します

  2开头：成功
  3开头：重定向
      301：永久重定向
      304：协商缓存
  资源过期了，进行http请求，但接口告诉客户端资源无修改，还可使用
  4:客户端错误
      401：无权限
      403：无资源权限
      404：找不到
      400:请求参数错误
  5：服务器

コード全体

import router from '@/router'
import store from '@/store'
import axios from 'axios'
import {
    
     Message } from 'element-ui'

const axiosCreate = axios.create({
    
    
  // 本地接口基地址
  // baseURL: 'http://localhost:3000/api'
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 100000000,
  // 是否跨域？
  withCredentials: true
})

// 请求拦截
axiosCreate.interceptors.request.use(function (config) {
    
    
  if (!config.noToken) {
    
    
    config.headers.Authorization = `Bearer ${
      
      store.state.user.token}`
  }
  return config
}, function (error) {
    
    
  return Promise.reject(error)
})


// 响应拦截
axiosCreate.interceptors.response.use((res) => {
    
    
  // 状态码未2开头走res
  if (res.data.success) {
    
    
    return res.data
  } else {
    
    
    console.log('错误信息', res)
    Message.error(res.data.message)
    return Promise.reject(new Error(res.data.message))
  }
  // return res
},
  (error) => {
    
    
    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

    // console.dir(error);
    return Promise.reject(error)
  })

// 暴露出去
export default axiosCreate

これは成功しました。次のことを達成する必要があります。

ページに入ったら、トークンを変更して何が起こるかを確認してください

自動ポップアップの

概要

(err)=>{
    
    
   if(err.response && err.response.status===401){
    
    
      // 删除token
      // 删除用户信息
      // 提示
      // 跳转路由到登录页
   }
  return Promise.reject(err)
}