gtalent-vue攻城狮必备token处理技能

      // 请求拦截
      axios.interceptors.request.use(config => {
       startLoading()
      // 设置统一的请求头：如何配置访问有token的接口
      if (localStorage.token) {
       config.headers.Authorization = localStorage.token
       }
      return config
      }, error => {
      return Promise.reject(error)
      })
  
 

响应拦截处理

如果返回的接口数据中，状态码未401，说明token过期或失效，则需要清除浏览器中缓存的token

      // 响应拦截
      axios.interceptors.response.use( response => {
       endLoading()
      return response
      }, error => {
       endLoading()
       Message.error(error.response.data)
      // 获取错误状态码，token失效
      const { status } = error.response
      if (status == 401) {
       Message.error('token失效，请重新登录')
      // 清除token
      localStorage.removeItem('token')
      // 重新跳转到login页面
       router.push('/login')
       }
      return Promise.reject(error)
      })

路由守卫

想要实现只有在登录或者注册成功的状态下，才能进入系统，这时候就可以使用路由守卫

配置路由守卫

在route.js中进行配置

      import Vue from 'vue'
      import VueRouter from 'vue-router'
      import Index from '../views/Index.vue'
      import Register from '../views/Register.vue'
      import NotFound from '../views/404.vue'
      import { from } from 'core-js/fn/array'
      Vue.use(VueRouter)
      const routes = [
        {
      path: '/',
      redirect: '/index',
        },
        {
      path: '/index',
      name: 'index',
      component: Index
        },
        {
      path: '/register',
      name: 'register',
      component: Register
        },
        {
      path: '*',
      name: '/404',
      component: NotFound
        }
      ]
      const router = new VueRouter({
       mode: 'history',
       base: process.env.BASE_URL,
        routes
      })
      // 路由守卫核心代码
      router.beforeEach((to,from,next) => {
       // 先判断浏览器中是否已经有token了，有则true，否则false
       const isLogin = localStorage.token ? true : false
       //然后判断要去往的页面，如果是去往login和register页面的，就直接放行
       //如果不是去往login和register页面，则判断有没有token，如果有token就放行，否则就跳转login页面
       if (to.path == '/login' || to.path == '/register') {
       next
        }else {
       isLogin ? next() : next('/login')
        }
      })
      export default router