如何基于Navigo Router实现登录后返回原访问页面？

我想基于Navigo Router实现这样的逻辑：用户访问任意URL时，若未登录则跳转到登录页面，登录完成后自动跳转到用户原本想要访问的页面。目前我写的原型里，登录后会固定跳转到/home页面，请问怎么改成返回原目标页面（比如/about）？

原型代码如下：

const router = new Navigo('/', {hash: true});
const app = document.getElementById('app');

let loggedIn = false;

router.on('/login', function(){
  console.log('**** in login');
  app.innerHTML = `
  <h1>Login</h1>
  <input type=button value="Click to login" onclick="loggedIn=true; alert('you are now logged in!'); router.navigate('/home')"></input>
  `
});

router.hooks({
  before(done, match){
    console.log('check if logged in');
    if(loggedIn){
      done()
    } else {
      console.log('need to login');
      done(false);
      //console.log(router)
      router.navigate('/login');
    }
  }
});

router.on('/home', ()=>{
  console.log('in home');
  app.innerText = "In home"
});

router.on('/about', function(){
  console.log('in about');
  app.innerText = "In about"
});

router.on('/', function(){
  console.log('in /');
  // app.innerText = "In /"
  router.navigate('/home')
});

router.navigate('/');

<div id="app"></div>

<script src="https://unpkg.com/navigo"></script>

当前登录跳转的代码是：

alert('you are now logged in!'); router.navigate('/home')

要实现登录后返回原目标页面，核心是在跳转登录前记录用户原本要访问的路径，登录成功后再跳转到这个路径。具体修改步骤如下：

1. 添加全局变量存储原路径
   新增一个变量redirectUrl，用来保存未登录时用户尝试访问的页面路径。

2. 修改before钩子，排除登录页面并记录原路径
   在钩子函数里判断，如果当前访问的是登录页面，直接放行；否则把match.url（当前要访问的路径）存入redirectUrl，再跳转到登录页。

3. 修改登录按钮的跳转逻辑
   登录成功后，不再固定跳/home，而是优先跳转到redirectUrl，如果没有记录（比如用户直接访问登录页），再默认跳/home。

修改后的完整代码如下：

const router = new Navigo('/', {hash: true});
const app = document.getElementById('app');

let loggedIn = false;
let redirectUrl = ''; // 新增：存储原目标路径

router.on('/login', function(){
  console.log('**** in login');
  app.innerHTML = `
  <h1>Login</h1>
  <input type=button value="Click to login" onclick="loggedIn=true; alert('you are now logged in!'); router.navigate(redirectUrl || '/home')"></input>
  `
});

router.hooks({
  before(done, match){
    console.log('check if logged in');
    // 排除登录页面，避免无限跳转
    if (match.url === '/login') {
      done();
      return;
    }
    
    if(loggedIn){
      done()
    } else {
      console.log('need to login');
      // 记录用户原本要访问的路径
      redirectUrl = match.url;
      done(false);
      router.navigate('/login');
    }
  }
});

router.on('/home', ()=>{
  console.log('in home');
  app.innerText = "In home"
});

router.on('/about', function(){
  console.log('in about');
  app.innerText = "In about"
});

router.on('/', function(){
  console.log('in /');
  router.navigate('/home')
});

router.navigate('/');

<div id="app"></div>

<script src="https://unpkg.com/navigo"></script>

关键修改点说明 #

• 新增redirectUrl变量存储用户未登录时尝试访问的路径；
• 在before钩子中排除了/login页面，防止未登录状态下访问登录页时触发跳转循环；
• 登录按钮的跳转逻辑改为router.navigate(redirectUrl || '/home')，优先使用记录的原路径，无记录时默认跳/home。

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