原文：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)
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。