详解vue项目中使用token的身份验证的简单实践

//router.js{ path: "/index", name: "index", component: resolve => require(['./index.vue'], resolve), meta: {   requiresAuth: true  }} 

router.beforeEach((to, from, next) => { //matched的数组中包含$route对象的检查元字段 //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值 if (to.matched.some(record => record.meta.requiresAuth)) {  //判断当前是否有登录的权限  if (!auth.loggedIn()) {   next({    path: '/login',    query: { redirect: to.fullPath }   })  } else {   next()  } } else {  next() // 确保一定要调用 next() }})

// http request 拦截器axios.interceptors.request.use( config => {  if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token   config.headers.Authorization = `token ${store.state.token}`;  }  return config; }, err => {  return Promise.reject(err); });// http response 拦截器axios.interceptors.response.use( response => {  return response; }, error => {  if (error.response) {   switch (error.response.status) {    case 401:     // 返回 401 清除token信息并跳转到登录页面     store.commit(types.LOGOUT);     router.replace({      path: 'login',      query: {redirect: router.currentRoute.fullPath}     })   }  }  return Promise.reject(error.response.data) // 返回接口返回的错误信息});

 //login.vue methods: {  login(){   if (this.token) {    //存储在本地的localStograge中    this.$store.commit(types.LOGIN, this.token)    //跳转至其他页面    let redirect = decodeURIComponent(this.$route.query.redirect || '/');    this.$router.push({     path: redirect    })   }  } }

import Vuex from 'vuex';import Vue from 'vue';import * as types from './types'Vue.use(Vuex);export default new Vuex.Store({ state: {  user: {},  token: null,  title: '' }, mutations: {  //登录成功将, token保存在localStorage中  [types.LOGIN]: (state, data) => {   localStorage.token = data;   state.token = data;  },  //退出登录将, token清空  [types.LOGOUT]: (state) => {   localStorage.removeItem('token');   state.token = null  } }});

export const LOGIN = 'login';export const LOGOUT = 'logout';