如何在JavaScript中实现路由守卫？-js教程-PHP中文网

如何在JavaScript中实现路由守卫？

冰火之心

发布： 2025-05-28 13:18:02

原创

702人浏览过

在javascript中实现路由守卫可以通过vue.js、react和纯javascript实现。1. 在vue.js中，使用全局守卫检查用户认证状态。2. 在react中，使用privateroute组件和react router v6实现。3. 纯javascript通过监听url变化和手动渲染实现。

如何在JavaScript中实现路由守卫？

实现路由守卫在JavaScript中尤其是在使用现代前端框架时非常重要，它可以帮助我们控制页面导航，确保用户在进入特定页面之前满足某些条件。这次我们就来聊聊如何在JavaScript中实现路由守卫，并分享一些我在实际项目中积累的经验和踩过的坑。

在JavaScript中实现路由守卫，最常见的方式是使用像Vue.js、React和Angular这样的前端框架。这些框架都提供了内置的路由守卫机制，但如果你在使用纯JavaScript或其他库时，也可以通过一些巧妙的方法来实现类似的功能。今天我们将重点讨论如何在Vue.js和React中实现路由守卫，同时也会探讨一些纯JavaScript的实现方案。

在Vue.js中，路由守卫可以分为全局守卫、路由独享的守卫和组件内的守卫。我们先来看一个简单的全局守卫的例子：

立即学习“Java免费学习笔记（深入）”；

// 在 main.js 或 router.js 中
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './store'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 你的路由配置
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

登录后复制

这个守卫会在每次路由跳转前检查是否需要认证，如果需要且用户未认证，则重定向到登录页面。在实际项目中，我发现使用这种方式可以很好地控制用户的访问权限，但需要注意的是，meta字段的使用需要在路由配置时明确定义。

在React中，通常使用React Router来实现路由守卫。以下是一个使用React Router v6的例子：

import { Navigate, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';

const PrivateRoute = ({ children }) => {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
};

// 在你的路由配置中使用
<Route path="/protected" element={
  <PrivateRoute>
    <ProtectedPage />
  </PrivateRoute>
} />

登录后复制

这个实现方式通过一个PrivateRoute组件来检查用户是否认证，如果未认证则重定向到登录页面。这里的一个优点是可以很容易地复用这个组件，但需要注意的是，React Router的版本不同，实现方式可能会有所差异。

如果你不使用任何框架，而是纯JavaScript，你可以通过监听URL的变化来实现类似的功能。以下是一个简单的例子：

let currentRoute = '/';

function navigate(route) {
  if (canNavigateTo(route)) {
    currentRoute = route;
    window.history.pushState({}, '', route);
    render();
  } else {
    console.log('Navigation blocked');
  }
}

function canNavigateTo(route) {
  // 这里可以添加你的逻辑，比如检查用户是否认证
  return route !== '/admin' || localStorage.getItem('isAuthenticated') === 'true';
}

function render() {
  // 根据 currentRoute 渲染相应的页面
  if (currentRoute === '/') {
    document.body.innerHTML = '<h1>Home</h1>';
  } else if (currentRoute === '/admin') {
    document.body.innerHTML = '<h1>Admin</h1>';
  }
}

window.addEventListener('popstate', () => {
  currentRoute = window.location.pathname;
  render();
});

// 初始渲染
render();

登录后复制

这种方法虽然简单，但需要手动处理很多细节，比如URL变化的监听和页面的渲染。在实际项目中，我发现这种方法虽然灵活，但维护成本较高，适合小型项目或学习用途。

在实际应用中，实现路由守卫时需要注意以下几点：