手把手教你用JS实现前端路由拦截，轻松搞定页面权限（附5种方案）

还在为前端路由拦截权限控制发愁吗？本文手把手教你搞定JS前端路由拦截，提供五种实用方案，轻松实现页面权限管理。文章深入解析了前端路由拦截的本质：在路由跳转前后进行权限判断。详细介绍了全局路由守卫、组件级别权限控制、服务端渲染、路由配置Meta字段和动态路由等主流实现方式，并提供Vue Router和React Router的示例代码。针对SPA应用，推荐全局路由守卫与组件级控制相结合的最佳实践。同时，还探讨了异步权限验证的处理以及如何避免路由拦截死循环，助你构建安全可靠的前端应用。

前端路由拦截的核心是通过在路由跳转前后进行权限判断，决定用户是否能访问特定页面。常见实现方式包括：1. 全局路由守卫（如 Vue 的 beforeEach 或 React 的 useNavigate 钩子），集中管理权限并控制跳转；2. 组件级别权限控制（如 React 的 HOC），灵活控制单个组件的访问权限；3. 服务端渲染（SSR）时在服务器校验权限，提高安全性但增加复杂度；4. 使用路由配置中的 meta 字段存储权限信息，在全局守卫中统一校验；5. 动态路由，根据用户权限动态生成路由表以实现精细化控制。SPA 中推荐使用全局路由守卫和组件级控制相结合的方式，并注意处理异步权限验证及避免重定向死循环问题。

前端路由拦截，简单来说，就是控制用户能否访问特定页面。实现方式多种多样，核心在于在路由跳转前后进行判断，决定是否允许跳转。

解决方案

前端路由拦截的本质是在路由跳转前后进行权限判断。常见的实现方案包括：

1. 全局路由守卫 (Vue Router / React Router): 这是最常用的方法。在路由跳转前，通过 beforeEach (Vue) 或 useNavigate (React) 钩子，检查用户权限。如果权限不足，可以重定向到登录页或其他授权页面。这种方式集中管理路由权限，方便维护。

   
   • Vue Router 示例:

   router.beforeEach((to, from, next) => {
     const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
     const isLoggedIn = localStorage.getItem('token'); // 假设使用 token 验证
   
     if (requiresAuth && !isLoggedIn) {
       next('/login'); // 重定向到登录页
     } else {
       next(); // 允许跳转
     }
   });

   • React Router 示例 (使用 useNavigate 钩子):

   import { useNavigate, useLocation } from 'react-router-dom';
   import { useEffect } from 'react';
   
   function AuthGuard({ children, requiredRoles }) {
     const navigate = useNavigate();
     const location = useLocation();
     const isLoggedIn = localStorage.getItem('token'); // 假设使用 token 验证
     const userRole = localStorage.getItem('role'); // 假设存储用户角色
   
     useEffect(() => {
       if (!isLoggedIn) {
         navigate('/login', { replace: true, state: { from: location } }); // 保存当前 location，登录后跳转回来
       } else if (requiredRoles && !requiredRoles.includes(userRole)) {
         navigate('/unauthorized'); // 重定向到无权限页面
       }
     }, [isLoggedIn, navigate, location, requiredRoles, userRole]);
   
     return children;
   }
   
   export default AuthGuard;

2. 组件级别权限控制 (Higher-Order Components - HOC): 通过高阶组件包裹需要权限控制的组件，在组件渲染前进行权限判断。这种方式更灵活，可以针对单个组件进行权限控制。

   // React 示例
   function withAuth(WrappedComponent, requiredRole) {
     return function(props) {
       const isLoggedIn = localStorage.getItem('token');
       const userRole = localStorage.getItem('role');
   
       if (!isLoggedIn || (requiredRole && userRole !== requiredRole)) {
         return <div>您没有权限访问此页面</div>; // 可以重定向到其他页面
       }
   
       return <WrappedComponent {...props} />;
     };
   }
   
   // 使用
   const AdminDashboard = withAuth(Dashboard, 'admin'); // 只有 admin 角色才能访问

3. 服务端渲染 (SSR) 时的权限控制: 在服务端进行权限判断，只有拥有权限的用户才能获取到页面内容。这种方式安全性更高，但实现复杂度也更高。

   • 例如，在 Next.js 中，可以在 getServerSideProps 函数中进行权限校验。

   export async function getServerSideProps(context) {
     const { req, res } = context;
     const token = req.cookies.token; // 从 cookie 中获取 token
   
     if (!token) {
       return {
         redirect: {
           destination: '/login',
           permanent: false,
         },
       };
     }
   
     // 校验 token，获取用户信息
     try {
       const user = await verifyToken(token); // 假设 verifyToken 是一个校验 token 的函数
       return {
         props: { user },
       };
     } catch (error) {
       return {
         redirect: {
           destination: '/login',
           permanent: false,
         },
       };
     }
   }
   
   function MyPage({ user }) {
     // ...
   }
   
   export default MyPage;

4. 路由配置中的 Meta 字段: 在路由配置中添加 meta 字段，用于存储权限信息。然后在全局路由守卫中读取 meta 字段，进行权限判断。这种方式可以更清晰地管理路由权限。

   // Vue Router 示例
   const routes = [
     {
       path: '/admin',
       component: AdminDashboard,
       meta: { requiresAuth: true, role: 'admin' },
     },
     // ...
   ];
   
   router.beforeEach((to, from, next) => {
     if (to.meta.requiresAuth) {
       const isLoggedIn = localStorage.getItem('token');
       const userRole = localStorage.getItem('role');
   
       if (!isLoggedIn) {
         next('/login');
       } else if (to.meta.role && userRole !== to.meta.role) {
         next('/unauthorized');
       } else {
         next();
       }
     } else {
       next();
     }
   });

5. 动态路由: 根据用户的权限动态生成路由表。这种方式可以更精细地控制用户的访问权限，但实现复杂度较高。

   • 例如，在用户登录后，从服务器获取用户拥有的权限列表，然后根据权限列表动态生成路由表。

单页面应用（SPA）路由拦截的最佳实践是什么？

SPA 的路由拦截核心在于客户端，因此全局路由守卫和组件级别权限控制是常用的选择。全局路由守卫集中管理，易于维护；组件级别权限控制更灵活，适合复杂场景。选择哪种方式取决于项目的具体需求和复杂度。SSR 也是一种选择，但会增加项目的复杂度。

如何处理异步权限验证？

权限验证往往需要从服务器获取用户信息，这是一个异步过程。在全局路由守卫中，可以使用 async/await 或 Promise 来处理异步权限验证。

// Vue Router 示例
router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth) {
    const isLoggedIn = localStorage.getItem('token');

    if (!isLoggedIn) {
      next('/login');
      return;
    }

    try {
      // 假设 getUserInfo 是一个异步函数，用于从服务器获取用户信息
      const user = await getUserInfo();
      // 将用户信息存储到 Vuex 或其他状态管理工具中
      store.commit('setUser', user);
      next();
    } catch (error) {
      // 处理错误，例如 token 过期
      localStorage.removeItem('token');
      next('/login');
    }
  } else {
    next();
  }
});

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

路由拦截的死循环通常发生在重定向到登录页时，登录页又需要登录才能访问。为了避免这种情况，可以在路由守卫中判断当前是否已经位于登录页，如果是，则直接放行。

// Vue Router 示例
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next(); // 如果已经在登录页，则直接放行
    return;
  }

  if (to.meta.requiresAuth) {
    const isLoggedIn = localStorage.getItem('token');

    if (!isLoggedIn) {
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

文中关于权限控制,路由守卫,SPA,前端路由拦截,异步权限验证的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《手把手教你用JS实现前端路由拦截，轻松搞定页面权限（附5种方案）》文章吧，也可关注golang学习网公众号了解相关技术文章。