vue cliでのtoken検証

1327 ワード

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()
  }
})

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   
})