nuxt中使用路由守卫的方法步骤
1.在plugins文件下创建一个route.js
import{getCookie,setCookie}from'@/pages/logreg/api/cookie'
importaxiosfrom'axios'
exportdefault({app,store})=>{
app.router.beforeEach((to,from,next)=>{
letisClient=process.client
if(isClient){
letcurrentUrl=location.href
if(currentUrl.indexOf('access_token=')!==-1){
letwechattoken=currentUrl.split('access_token=')[1]
wechattoken=wechattoken.split('&')[0]
setCookie('token',wechattoken,5)
}
lettoken=getCookie('token')
if(token){
store.state.user.userinfo.token=token
axios
.get('https://api.ass.net/pub/api/user_info',{
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里面配置
plugins:[
{src:'@/plugins/route',ssr:true}
],
PS：Nuxt在axios请求拦截中使用路由
最近在开发一个网站,用的nuxt搭建的框架,因为需要在请求token过期之后提示用户重新登录并且返回登录页面,但是在axios的配置文件中使用router.push一直报错,都准备放弃使用公众组件去进行路由跳转了,但是天无绝人之路,最终在官方文档中找到了redirect,具体操作如下:
在axios的js文件中添加默认的方法,并且获取redirect,并且使用使用myredirect将redirect储存起来
letmyredirect;
exportdefaultfunction({redirect}){
myredirect=redirect;
}
在需要使用路由跳转的地方进行跳转(此处在判断token过期时跳转)
if(error.message.toString().slice(-3)==='401'){
Vue.prototype.$message.error('登陆超时，请重新登陆...')
setTimeout(function(){
returnmyredirect('/login/login')
},2000)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。