設計

• 在src目錄下創建一個interceptor.js
• 登錄邏輯
  • 設置攔截,在發起請求前,先判斷用戶是否登錄(在本栗中,即是否能夠在瀏覽器緩存中找到token).
• 登出邏輯
  • 對服務端傳過來的數據進行攔截,判斷其狀態碼是否為401(未登錄或token過期)
  • 清空瀏覽器緩存中的token
  • 重定向到登入頁面
• interceptor.js

const axios = require('axios');// 參數是Vue實例 export default function(vm) {// 設置請求攔截器axios.interceptors.request.use(config => {// 獲取tokenconst token = localStorage.getItem('token');if (token) { // 如果存在令牌則添加token請求頭// config.headers.token = token; // 注: 使用Bearer Token規范config.headers.Authorization = `Bearer ${token}`;}return config;})// 響應攔截器axios.interceptors.response.use(null, err => {if (err.response.status === 401) { // 沒有登錄,或者令牌過期// 清空vuex和localstoragevm.$store.dispatch('logout');// 跳轉loginvm.$router.push('/login');}return Promise.reject(err);}) }

攔截使用

• main.js

import Vue from 'vue' import './cube-ui' import App from './App.vue' import router from './router' import store from './store' import interceptor from './interceptor'Vue.config.productionTip = false// 攔截器的初始化const app = new Vue({router,store,render: h => h(App) }).$mount('#app')interceptor(app);

總結

以上是生活随笔為你收集整理的vue --- http拦截,登录登出的逻辑设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。