nuxt中使用路由守卫的方法步骤
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了nuxt中使用路由守卫的方法步骤,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1648字,纯文字阅读大概需要3分钟。
内容图文
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) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的nuxt中使用路由守卫的方法步骤全部内容,希望文章能够帮你解决nuxt中使用路由守卫的方法步骤所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。