Vue 401は、Vuexに合わせて複数回のフレームを防止するケースです。

1.Vuexの設置
npm install vuex--save
2.新しいstoreディレクトリ構造

3.store.jsを編集する

import Vuex from 'vuex'
import Vue from 'vue'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
 
Vue.use(Vuex)
 
//     
const isDev = process.env.NODE_ENV === 'development'
 
export default new Vuex.Store({
 strict: isDev, //            ，   Vuex         
 state: defaultState,
 mutations,
 getters,
 actions
})

4.state.jsを編集する

export default {
 tokenStatus: true, // token  
}

5.muttions.jsを編集する

export default {
 updateTokenStatus (state, bool) {
  state.tokenStatus = bool
 }
}

PS:gettersは属性を計算するために使用され、actionsは非同期操作に使用されます（未使用）
6.Vueルートディレクトリにマウントして、main.jsを編集します。

import store from './store/store'
 
new Vue({
 store,
 router,
 render: h => h(App)
}).$mount('#app')

7.login登録時にstate.token Sttusの値を変更する

import { mapMutations } from 'vuex' 
methods: {
  //   Vuex mutations   
  ...mapMutations(['updateTokenStatus']),
  //     
  login () {
    ......
    //   Vuex.state.tokenStatus  
    this.updateTokenStatus(true)
  }
}

8.設定axiosのエラー判断

//        
  initUserInfo () {
   const p1 = this.$api.user.getUserInfo()
   p1.then(result => {
    this.data = result
    this.isEdit = false
    this.firstLoading = false
   }).catch(reason => {
    this.firstLoading = false
    this.isEdit = false
    //        code -1，      
    if (parseInt(reason.code) === -1) {
     this.$alert(reason.message, '  ', { type: 'error' })
    }
   })
  },

9.ブロッキング応答、処理401、カスタムエラーを返します。

import router from '../../router'
import axios from 'axios'
import localStorage from 'localStorage'
import { MessageBox } from 'element-ui'
import store from '../../store/store'
 
// http response    
axios.interceptors.response.use(
 response => {
  return response
 },
 error => {
  if (error.response) {
   if (error.response.status === 401) {
    switch (error.response.status) {
     case 401:
      const route = localStorage.getItem('vip_entrance')
      router.replace({
       path: route,
       query: { redirect: router.currentRoute.fullPath }
      })
      if (store.state.tokenStatus) {
       //        
       MessageBox.alert('    ！', '  ', { type: 'error' })
       //   tokenStatus  ，      
       store.commit('updateTokenStatus', false)
      }
      const data = {
       code: 1
      }
      return Promise.reject(data)
    }
   }
  }
  return Promise.reject(error.response.data)
 }
)

知識を補充します：vue配置vueは厳格なモードの下で現れるのが問題です。
余計なことを言わないで、コードを見てください。
厳格なモードをオフにしないとエラーが発生します。

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";
import user from "./modules/user";
import myCen from "./modules/myCen";
import registered from "./modules/registered";
Vue.use(Vuex);

export default new Vuex.Store({
 strict: false, //      
 modules: {
  user,
  myCen,
  registered
 },
 //      
 plugins: [ 
  createPersistedState({
   storage: {
    getItem: key => Cookies.get(key),
    setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
    removeItem: key => Cookies.remove(key)
   }
  })
 ]
});

以上のこのVue 401はVuexに合わせて何度もフレームをはじくことを防止しています。小编が皆さんに提供したすべての内容を共有しています。