vue cliでのtoken検証
1327 ワード
1.フロントエンドルーティングジャンプの設定
2.ログインに成功し、tokenを保存
3.要求ブロッカーを設定tokenがあれば毎回tokenを携帯させる
4応答ブロックを設定して応答結果を処理し、tokenに問題が発生し、必ず401を返す
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
})