js怎样实现路由跳转拦截 js路由跳转拦截的5种处理方案

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

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

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

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

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

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

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

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

  return (
    <div>
      <Prompt
        when={isDirty}
        message="您确定要离开此页面吗？未保存的更改将会丢失。"
      />
      {/* ...你的组件内容... */}
    </div>
  );
}

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 (
    <div>
      {/* ...你的组件内容... */}
    </div>
  );
}

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);
  });
}

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();
  }
});