vue cli中token驗證

1.設置前端路由跳轉

router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta.auth)) {
// 判斷token是否存在，如果存在則正常跳轉
if (localStorage.getItem('token')) {
next()
} else {
next('/login')
}
} else {
next()
}
})

 這里我們只是列舉了一部分的代碼，全量的代碼請查看。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import StudentsInfo from '@/components/StudentsInfo'
import Login from '@/components/Login'

Vue.use(Router)

let router = new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/StudentsInfo',
      name: 'StudentsInfo',
      component: StudentsInfo
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})

// 導航守衛
// 使用 router.beforeEach 注冊一個全局前置守衛，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
  if (to.path === '/Login') {

    next();
  } else {
    let token = localStorage.getItem('Authorization');
    if (token === null || token === '') {
      next('/Login');
    } else {
      next();
    }
  }
});

export default router;

 

2.登錄成功，將token存儲

login () {
// 發起請求登錄
axios.post('/user/login', this.user).then(res => {
console.log(res.data)
// 接收到token后將token存儲到localstorage
// 前綴必須要加
localStorage.setItem('token', "Bearer " + res.data.res.token)
})
}

 

3.設置請求攔截器
 

只要有token就讓每次請求都攜帶token

// 設置請求攔截器
axios.interceptors.request.use(config => {
// console.log(config)
const token = localStorage.getItem('token')
if (token) {
// 將獲取到的token設置給header中的Authorization
config.headers.Authorization = token
}
return config
})

 

4設置響應攔截器

 對響應結果進行處理，token出現問題，返回一定是401

// 設置響應攔截器
axios.interceptors.response.use(res => {
// 對結果進行處理
if (res.data.res_code === 401) {
// 跳轉登錄
router.replace('/login')
// 刪除token
localStorage.removeItem('token')
}
return res
}, err => {
// 如果是正常接口，會走err，err.response.status值為401 進行跳轉及刪除token的操作
})