Vue登录拦截：通过axios拦截器添加token验证（完整版）

1.获取保存token

在前端界面中添加login方法（）

login(form){
	const _this = this
	console.log(this.form)
	const url = this.HOST + "/login"
	Axs.post(url,{
	  username : this.form.username,
	  password : this.form.password
	}).then(function (resp){
	  if(resp.data.flg == "true"){
	    _this.$store.commit('SET_TOKEN',resp.data.token)
	    _this.$store.commit('GET_USER', JSON.stringify(resp.data)) 
	    _this.$router.replace({ path:'/dashboard' })
	    alert("登录成功！")
	  }else{
	    _this.$alert(resp.data.msg)
	  }
	})
	.catch(function (error) {
	  console.log(error);
	})
}

2.设置全局路由守卫

在router/index.js中设置全局路由守卫：

//创建路由对象
const router = new Router({
  routes: [
    //省略
  ]
})
//全局路由守卫
router.beforeEach((to, from, next) => { // 路由跳转前监控(保证登录状态)
  // 重登陆删除本地数据
  if (to.path === '/login') {
    sessionStorage.removeItem('user')
  }
  let user = JSON.parse(sessionStorage.getItem('user'))
  // 登录验证：如果本地没有储存用户且不在登录页面则跳转
  if (!user && to.path !== '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})
//导出router
export default router

3.Vuex store配置

在src下创建store文件夹，目录结构如下图：

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app,
    user,
  },
});

export default store

user.js

const user = {
  state: {
    user: window.sessionStorage.getItem('user'),
    token: window.sessionStorage.getItem('token')
  },

  mutations: {
    //将token保存到sessionStorage里，token表示登陆状态
    SET_TOKEN: (state, data) => {
      state.token = data
      window.sessionStorage.setItem('token', data)
    },
    //获取用户名
    GET_USER: (state, data) => {
      // 把用户名存起来
      state.user = data
      window.sessionStorage.setItem('user', data)
    },
    //登出
    LOGOUT: (state) => {
      // 登出的时候要清除token
      state.token = null
      state.user = null
      window.sessionStorage.removeItem('token')
      window.sessionStorage.removeItem('user')
    }
  },
  actions: {

  }
};

export default user;

4.配置拦截器

在main.js中添加如下配置：

// 创建axios实例
var instance = Axios.create({    timeout: 1000 * 12});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
 * 请求拦截器
 * 每次请求前，如果存在token则在请求头中携带token
 */
instance.interceptors.request.use(
  config => {
    // 登录流程控制中，根据本地是否存在token判断用户的登录情况
    // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    const token = store.state.user.token;
    token && (config.headers.common['token']  = token);
    return config;
  },
  error => Promise.error(error))