nuxt auth 登录后重定向到原来页面

目录

• • 前言
  • 解决方案

前言

• 我有一个需求，就是登录后，还是回到之前的页面。如果是路由之间的跳转并且是启用了认证的页面，会自动跳转到之前的页面。这没什么问题。
• 不过我想的是页面可以进入，但是某些axios请求要登录才能发起这种情况，找了比较久没有答案。
• 后来偶然发现auth的重定向逻辑，原来是依靠的redirect。如下图所示。

解决方案

• 增加axios插件，拦截请求。

...省略...

  //请求时拦截
  $axios.onRequest(config => {
 
    // 登录的重定向

    // 判断请求地址和有没有登录
    if(config.url == '/api/test/comment' && !store.state.auth.loggedIn){
      console.log('需要登录')
      // 重定向到不同页面
      $cookies.set('redirect', '/create/xxx')
      // 跳转到登录页面
       redirect('/login')
    }
    
    return config
  })
  ... 省略 ...

• 然后登录页面login.vue，接收cookie的值。

...省略...
   async fetch({ store, params, $axios,$cookies }) {
    console.log('fetch')
    store.state.auth.redirect  =  $cookies.get('redirect')
    console.log(store.state.auth.redirect)
  },
  ...省略...

• 这样就能把重定向页面替换掉了，如下图所示。