189 8069 5689
如何在nuxt中使用路由守卫？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联服务项目包括吴江网站建设、吴江网站制作、吴江网页制作以及吴江网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，吴江网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到吴江省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
1.在plugins文件下创建一个route.js
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
.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储存起来
let myredirect;
export default function ({redirect }) {
myredirect = redirect;
}在需要使用路由跳转的地方进行跳转(此处在判断token过期时跳转)
if (error.message.toString().slice(-3) === '401') {
Vue.prototype.$message.error('登陆超时，请重新登陆...')
setTimeout(function () {
return myredirect('/login/login')
}, 2000)
}看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。