原文：https://www.jb51.net/article/155388.htm
1.在plugins文件下創建一個route.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import { getCookie, setCookie } from
'@/pages/logreg/api/cookie'
import axios from
'axios'
export
default
({ app, store }) => {
app.router.beforeEach((to, from, next) => {
let isClient = process.client
if
(isClient) {
let currentUrl = location.href
if
(currentUrl.indexOf(
'access_token='
) !== -1) {
let wechattoken = currentUrl.split(
'access_token='
)[1]
wechattoken = wechattoken.split(
'&'
)[0]
setCookie(
'token'
, wechattoken, 5)
}
let token = getCookie(
'token'
)
if
(token) {
store.state.user.userinfo.token = token
axios
params: {
token
}
})
.then(res => {
res = res.data
if
(res.code == 0) {
res = res.data
res.headImg = res.headImg.replace(
'http:'
,
'https:'
)
store.state.user.userinfo = Object.assign(
{},
store.state.user.userinfo,
res
)
}
})
.
catch
(error => console.log(error))
}
}
next()
})
}
|
2.在nuxt.config.js里面配置
|
1
2
3
|
plugins: [
{ src:
'@/plugins/route'
, ssr:
true
}
],
|
PS：Nuxt在axios請求攔截中使用路由
最近在開發一個網站,用的nuxt搭建的框架,因為需要在請求token過期之后提示用戶重新登錄並且返回登錄頁面,但是在axios的配置文件中使用router.push一直報錯,都准備放棄使用公眾組件去進行路由跳轉了,但是天無絕人之路,最終在官方文檔中找到了redirect,具體操作如下:
在axios的js文件中添加默認的方法,並且獲取redirect,並且使用使用myredirect將redirect儲存起來
|
1
2
3
4
|
let myredirect;
export
default
function
({redirect }) {
myredirect = redirect;
}
|
在需要使用路由跳轉的地方進行跳轉(此處在判斷token過期時跳轉)
|
1
2
3
4
5
6
|
if
(error.message.toString().slice(-3) ===
'401'
) {
Vue.prototype.$message.error(
'登陸超時，請重新登陸...'
)
setTimeout(
function
() {
return
myredirect(
'/login/login'
)
}, 2000)
}
|
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。