Nuxt.js中登录后重定向至原页面的实现方案咨询

这里有两个实用的思路来解决你的问题，都是基于auth-module现有能力扩展的：

方法一：登录成功后手动处理跳转 #

这个方法最直接，在你的登录提交方法里直接获取redirect参数，登录成功后手动跳转到目标页面：

async submit() {
  // 从当前登录页的路由query中获取redirect参数，默认跳转到首页
  const redirect = this.$route.query.redirect || '/'
  
  try {
    await this.$auth.loginWith('local', {
      data: this.form
    })
    
    // 登录成功后跳转到目标页面
    this.$router.push(redirect)
  } catch (error) {
    // 处理登录失败的情况，比如提示错误信息
    console.error('登录失败:', error)
  }
}

额外安全提示 #

为了防止开放重定向攻击（比如redirect参数被设置为外部恶意网站），建议对redirect参数做校验：

// 校验redirect是否为同域名的合法路径
const isValidRedirect = redirect.startsWith('/') || redirect.startsWith(window.location.origin)
const safeRedirect = isValidRedirect ? redirect : '/'
this.$router.push(safeRedirect)

方法二：利用auth-module的redirect配置函数 #

如果你希望在全局层面统一处理动态重定向，可以修改nuxt.config.js中的auth配置，把redirect的home选项改成一个函数，登录成功后会自动调用这个函数来获取跳转路径：

// nuxt.config.js
export default {
  auth: {
    redirect: {
      // 登录成功后的动态跳转逻辑
      home: (route) => {
        // 从登录页的路由query中提取redirect参数
        const redirect = route.query.redirect
        // 有参数则跳转到指定页面，否则默认跳首页
        return redirect || '/'
      },
      // 保留其他默认配置
      login: '/login',
      logout: '/',
      callback: '/login'
    }
  }
}

这个方法的好处是不用在每个登录组件里重复写跳转逻辑，全局统一处理。这里的route参数是登录页的路由对象，能直接拿到登录时携带的redirect参数。

补充说明 #

• 如果你是通过auth-module的auth中间件自动跳转到登录页的，中间件默认会把当前访问的路径作为redirect参数添加到登录页的query里，刚好匹配你的需求。
• 登录页的路由无需额外配置，nuxt默认支持接收query参数。

内容的提问来源于stack exchange，提问作者mauxtin