vue --- http拦截,登录登出的逻辑设计

设计

在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);