應(yīng)用場景一

Vue刷新token，判斷token是否過期、失效，進(jìn)行登錄判斷跟token值存儲(chǔ)

刷新token和token是否過期的操作都是由后端實(shí)現(xiàn)，前端只負(fù)責(zé)根據(jù)code的不同狀態(tài)來做不同的操作：可以跟后端討論不同的狀態(tài)對(duì)應(yīng)不同的情況來進(jìn)行處理

具體實(shí)現(xiàn)

/** * 全局變量 和 設(shè)置 、配置等。。。 */import axios from 'axios' // 引入axios import Storage from '@/assets/js/util/storage.js' // storage工具類，簡單的封裝 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'/* 請(qǐng)求攔截器 */axios.interceptors.request.use(function (config) { // 每次請(qǐng)求時(shí)會(huì)從localStorage中獲取token let token = Storage.localGet('token')if (token) {token = 'bearer' + ' ' + token.replace(/'|"/g, '') // 把token加入到默認(rèn)請(qǐng)求參數(shù)中 config.headers.common['Authorization'] = token}return config}, function (error) {return Promise.reject(error)})/* 響應(yīng)攔截器 */axios.interceptors.response.use(function (response) { // ①10010 token過期（30天） ②10011 token無效if (response.data.code === 10010 || response.data.code === 10011) {Storage.localRemove('token') // 刪除已經(jīng)失效或過期的token（不刪除也可以，因?yàn)榈卿浐蟾采w） router.replace({path: '/login' // 到登錄頁重新獲取token })} else if (response.data.token) { // 判斷token是否存在，如果存在說明需要更新token Storage.localSet('token', response.data.token) // 覆蓋原來的token(默認(rèn)一天刷新一次) }return response}, function (error) {return Promise.reject(error)})

?

轉(zhuǎn)載于:https://www.cnblogs.com/qdlhj/p/9844944.html

總結(jié)

以上是生活随笔為你收集整理的vue之登录和token处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。