JS路由跳转拦截的5种方法详解

你在学习文章相关的知识吗？本文《JS路由跳转拦截的5种实现方法》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

路由跳转拦截有5种处理方案。1.使用beforeunload事件，可在页面关闭、刷新或跳转前弹出默认确认框，适用于全局页面离开提示，但无法自定义界面且无法区分操作类型；2.使用hashchange事件，适用于hash路由，在hash变化时判断是否允许跳转，但对history路由无效；3.使用popstate事件，适用于history路由，在浏览器前进/后退或调用history.go等方法时触发，但不会响应pushState/replaceState操作；4.Vue Router的beforeEach导航守卫，可集成于Vue项目中进行全局路由控制，便于权限验证和跳转管理；5.React Router的Prompt组件或useBlocker Hook，适用于React项目，支持灵活的跳转提示与控制。拦截中如需处理异步逻辑，可通过async/await或Promise实现；为避免死循环，可设置导航标志位或维护白名单列表。最佳实践包括：仅在必要时拦截、提供明确提示、避免死循环、合理处理异步、优先使用框架API、谨慎使用beforeunload并做好充分测试。

路由跳转拦截，简单来说，就是在用户试图从一个页面跳转到另一个页面时，先“拦”一下，看看有没有什么条件不满足，或者需要用户确认的事情没做。

js路由跳转拦截的5种处理方案

方案一：利用beforeunload事件

beforeunload事件会在窗口即将卸载（例如关闭、刷新、跳转）时触发。虽然它不是专门为路由拦截设计的，但我们可以利用它来弹出确认对话框，阻止用户离开当前页面。

window.addEventListener('beforeunload', function (e) {
  // 兼容处理
  e = e || window.event;

  // 弹窗提示
  if (/* 这里放你的判断条件，比如表单未保存 */ true) {
    e.preventDefault();
    e.returnValue = '您确定要离开此页面吗？未保存的更改将会丢失。';
    return '您确定要离开此页面吗？未保存的更改将会丢失。'; // 兼容旧版本浏览器
  }
});

这种方法的优点是简单粗暴，兼容性好。缺点也很明显：

• 用户体验不太好，因为浏览器会显示一个默认的提示信息，无法完全自定义。
• 无法区分是刷新还是跳转，拦截所有离开页面的操作。

方案二：使用hashchange事件（适用于hash路由）

如果你的项目使用的是hash路由，那么可以监听hashchange事件，在hash值改变之前进行拦截。

window.addEventListener('hashchange', function (e) {
  const oldURL = e.oldURL;
  const newURL = e.newURL;

  if (/* 这里放你的判断条件，比如权限不足 */ true) {
    // 阻止跳转，将hash值改回原来的值
    window.location.hash = oldURL.split('#')[1];
    // 或者，如果想更优雅一点，可以显示一个提示信息，然后什么也不做
    alert('权限不足，无法访问该页面');
  }
});

这种方法的优点是能够精确控制hash路由的跳转。缺点是只适用于hash路由，对于history路由无效。另外，直接修改window.location.hash可能会导致浏览器历史记录混乱，需要谨慎使用。

方案三：使用popstate事件（适用于history路由）

如果你的项目使用的是history路由，那么可以监听popstate事件，该事件在浏览器历史记录发生改变时触发（例如点击浏览器的前进/后退按钮）。

window.addEventListener('popstate', function (e) {
  if (/* 这里放你的判断条件，比如未登录 */ true) {
    // 阻止跳转，将history状态改回原来的值
    history.pushState(null, null, e.target.location.pathname);
    // 或者，重定向到登录页面
    window.location.href = '/login';
  }
});

需要注意的是，popstate事件只在通过浏览器的前进/后退按钮或history.back()、history.forward()、history.go()方法改变历史记录时触发。通过history.pushState()或history.replaceState()方法改变历史记录不会触发popstate事件。因此，我们需要手动处理这些情况。

方案四：利用Vue Router的beforeEach导航守卫

如果你使用的是Vue.js，那么可以使用Vue Router提供的beforeEach导航守卫来实现路由拦截。

router.beforeEach((to, from, next) => {
  if (/* 这里放你的判断条件，比如需要登录 */ to.meta.requiresAuth) {
    if (localStorage.getItem('token')) {
      // 已登录，继续跳转
      next();
    } else {
      // 未登录，跳转到登录页面
      next('/login');
    }
  } else {
    // 不需要登录，继续跳转
    next();
  }
});

这种方法的优点是简单易用，与Vue.js生态系统完美集成。缺点是只适用于Vue.js项目。

方案五：使用React Router的Prompt组件或自定义Hook

如果你使用的是React.js，那么可以使用React Router提供的Prompt组件或者自定义Hook来实现路由拦截。

使用Prompt组件：

import { Prompt } from 'react-router-dom';

function MyComponent() {
  const [isDirty, setIsDirty] = useState(false);

  return (
    

      
      {/* ...你的组件内容... */}
    
  );
}

使用自定义Hook：

import { useEffect, useRef } from 'react';
import { unstable_useBlocker as useBlocker } from 'react-router-dom'; // 注意: unstable_useBlocker 是实验性的

function usePreventNavigation(isDirty, message = '您确定要离开此页面吗？未保存的更改将会丢失。') {
  const blocker = useBlocker(isDirty);

  useEffect(() => {
    if (blocker.state === 'blocked') {
      const confirmation = window.confirm(message);
      if (confirmation) {
        blocker.proceed();
      } else {
        blocker.reset();
      }
    }
  }, [blocker, message]);

  return blocker;
}

function MyComponent() {
  const [isDirty, setIsDirty] = useState(false);
  const blocker = usePreventNavigation(isDirty);

  return (
    

      {/* ...你的组件内容... */}
    
  );
}

React Router V6 引入了 useBlocker，但它标记为 unstable，意味着 API 可能会在未来版本中更改。

这两种方法的优点是能够灵活控制路由拦截，与React.js生态系统完美集成。缺点是只适用于React.js项目。

拦截路由跳转时如何处理异步操作？

在拦截路由跳转时，我们经常会遇到需要进行异步操作的情况，例如向服务器发送请求、读取本地存储等。如果异步操作未完成，就继续跳转，可能会导致数据不一致或其他问题。

解决这个问题的方法是使用async/await语法，或者使用Promise。

以Vue Router的beforeEach导航守卫为例：

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth) {
    try {
      // 模拟异步操作
      const isLoggedIn = await checkLoginStatus();
      if (isLoggedIn) {
        next();
      } else {
        next('/login');
      }
    } catch (error) {
      console.error('检查登录状态失败', error);
      next('/error'); // 导航到错误页面
    }
  } else {
    next();
  }
});

async function checkLoginStatus() {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟从服务器获取登录状态
      const token = localStorage.getItem('token');
      resolve(!!token);
    }, 500);
  });
}

在这个例子中，checkLoginStatus函数是一个异步函数，它返回一个Promise。在beforeEach导航守卫中，我们使用await关键字等待checkLoginStatus函数执行完成，然后再根据登录状态决定是否继续跳转。

如何避免路由拦截导致的死循环？

路由拦截的一个常见问题是死循环，例如A页面拦截跳转到B页面，B页面又拦截跳转到A页面，导致浏览器不断地在A和B页面之间跳转。

避免死循环的方法是设置一个标志位，或者使用白名单。

设置标志位：

let isNavigating = false;

router.beforeEach((to, from, next) => {
  if (isNavigating) {
    return next(); // 如果已经在导航中，则直接放行
  }

  if (to.meta.requiresAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      isNavigating = true; // 设置标志位
      next('/login');
      setTimeout(() => {
        isNavigating = false; // 延迟重置标志位，防止快速连续跳转
      }, 100);
    }
  } else {
    next();
  }
});

使用白名单：

const whiteList = ['/login', '/register']; // 白名单页面，不需要登录

router.beforeEach((to, from, next) => {
  if (whiteList.includes(to.path)) {
    return next(); // 如果在白名单中，则直接放行
  }

  if (to.meta.requiresAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

设置标志位的方法简单易懂，但需要注意标志位的重置时机。使用白名单的方法更加清晰，但需要维护一个白名单列表。

路由拦截的最佳实践是什么？

路由拦截是一个强大的工具，但如果使用不当，可能会导致用户体验下降。以下是一些路由拦截的最佳实践：

• 只在必要时进行拦截。 不要为了拦截而拦截，只在确实需要进行权限验证、数据校验等操作时才进行拦截。
• 提供清晰的提示信息。 如果拦截了用户的跳转，一定要提供清晰的提示信息，告诉用户为什么被拦截，以及如何解决问题。
• 避免死循环。 确保路由拦截不会导致死循环，影响用户体验。
• 考虑异步操作。 如果拦截过程中需要进行异步操作，一定要确保异步操作完成后再进行跳转。
• 使用框架提供的API。 如果你使用的是Vue.js或React.js等框架，尽量使用框架提供的API来实现路由拦截，这样可以更好地与框架集成，提高代码的可维护性。
• 谨慎使用beforeunload。 beforeunload事件会影响用户体验，尽量避免使用，除非确实需要提醒用户保存未保存的更改。
• 测试！测试！测试！ 充分测试你的路由拦截逻辑，确保它能够正常工作，并且不会影响用户体验。

总而言之，路由拦截是一项需要谨慎使用的技术。理解其原理、掌握各种实现方案、并遵循最佳实践，才能有效地利用路由拦截来提升用户体验，并确保应用程序的安全性和稳定性。

文中关于JS,路由跳转拦截的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS路由跳转拦截的5种方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。