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 => {
        // 获取token
        const 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和localstorage
            vm.$store.dispatch('logout');
            // 跳转login
            vm.$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);