手把手教你Vue和React的路由拦截鉴权

前端

2023-01-08 02:51:53

路由拦截鉴权：保障 Vue 和 React 单页面应用的安全

前言

随着前端开发如火如荼，Vue 和 React 凭借其灵活性、强大的生态系统成为开发者的热门选择。但在构建单页面应用时，有效管理用户访问权限，确保应用的安全和可靠性至关重要。本文将深入探讨如何在 Vue 和 React 中实现路由拦截鉴权。

路由拦截鉴权的概念

路由拦截鉴权是指在路由跳转时进行拦截，验证用户是否拥有访问权限。这就像在应用程序的入口处设置一个哨兵，防止未经授权的用户访问敏感内容。

Vue 中的路由拦截鉴权

Vue 提供了路由守卫（Route Guard）机制，允许我们在路由跳转前进行拦截和权限检查。以下是使用 Vue 实现路由拦截鉴权的步骤：

// 全局路由守卫
router.beforeEach((to, from, next) => {
  // 如果该路由需要鉴权
  if (to.meta.requiresAuth) {
    // 检查用户是否已登录
    if (store.state.user) {
      // 已登录，允许通过
      next()
    } else {
      // 未登录，跳转到登录页面
      next('/login')
    }
  } else {
    // 不需要鉴权，直接通过
    next()
  }
})

在这个例子中，我们通过 router.beforeEach 钩子函数实现了全局路由守卫。当路由跳转时，它会检查 to.meta.requiresAuth 字段，如果为真，表示该路由需要鉴权。接下来，我们会检查用户是否已登录，已登录则允许通过，否则重定向到登录页面。

React 中的路由拦截鉴权

在 React 中，我们可以使用 useAuth 自定义 Hook 来实现路由拦截鉴权。该 Hook 会管理用户状态，并返回一个组件，用于包裹需要鉴权的路由。

// useAuth Hook
const useAuth = () => {
  const [user, setUser] = useState(null)

  // 登录方法
  const login = (data) => {
    setUser(data)
  }

  // 退出登录方法
  const logout = () => {
    setUser(null)
  }

  return { user, login, logout }
}

// 路由拦截器
const AuthGuard = ({ children }) => {
  const { user } = useAuth()

  return user ? children : <Redirect to="/login" />
}

// 使用路由拦截器
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<AuthGuard><HomePage /></AuthGuard>} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  )
}