Nuxt在axios等独立插件中使用路由

作者:WaynePeng 来源:juejin.im 更新时间:2023-05-25 21:55

未测试:


最近在开发一个网站,用的nuxt搭建的框架,因为需要在请求token过期之后提示用户重新登录并且返回登录页面,但是在axios的配置文件中使用router.push一直报错,都准备放弃使用公众组件去进行路由跳转了,但是天无绝人之路,最终在官方文档中找到了redirect,具体操作如下:

  1. 在axios的js文件中添加默认的方法,并且获取redirect,并且使用使用myredirect将redirect储存起来
let myredirect;
export default function ({redirect }) {
  myredirect = redirect;
}
复制代码
  1. 在需要使用路由跳转的地方进行跳转(此处在判断token过期时跳转)
if (error.message.toString().slice(-3) === '401') {
    Vue.prototype.$message.error('登陆超时,请重新登陆...')
    setTimeout(function () {
      return myredirect('/login/login')
    }, 2000)
  }
复制代码

ok,到这里我们的路由跳转就配置好了,当我们的token过期之后我们就会重定向跳转到登录页面了