说实话，前端路由守卫这玩意儿，说简单也简单，说复杂也真Neng把你绕晕。你要是没写过可Neng觉得它就是个“权限控制”的小工具，但等你真上手了才发现它Neng解决大问题——比如用户没登录就进了个人中心，比如普通用户也Neng访问管理员页面比如跳转的时候数据还没加载完就渲染了页面体验直接拉胯。今天咱就来聊聊，前端路由守卫，到底怎么写？

路由守卫是啥？

咱先打个比方，你懂的，路由守卫就像一个门卫，守在你页面跳转的必经之路上。用户想进哪个页面先得过它这关。Ru果不符合条件，比如没登录、没权限，那对不起，直接给你拦回去。

在 Vue 项目里用的是 Vue Router，路由守卫分三类：

全局守卫

路由独享守卫

组件内守卫

但说实话，掌握全局守卫，基本就Neng解决 80% 的权限问题了。咱今天主要讲的就是这个。

Vue3 + Vue Router 实战

先kan个Zui基础的全局守卫写法：

import { createRouter, createWebHistory } from 'vue-router'
import { getStorage } from '@/utils/storage'
const routes = 
const router = createRouter({
  history: createWebHistory,
  routes
})
// 全局前置守卫
router.beforeEach => {
  const token = getStorage
  const userRole = getStorage?.role || ''
  if  {
    if  {
      return next
    } else {
      if  {
        return next
      }
      next
    }
  } else {
    next
  }
})
export default router

这段代码，咱就是说Yi经把登录状态、角色权限、跳转逻辑dou处理了。你复制过去，稍微改改路径和字段，就Neng直接用。

登录后跳转回原页面

这里有个小坑，害，好多新手dou踩过。用户没登录，访问了需要权限的页面登录后应该跳回原来的页面而不是直接跳首页。这个体验差距可大了。

解决办法也简单，登录时把当前页面地址作为 query 参数传过去，登录成功后再跳回来：

// 登录页面
const login = async  => {
  const res = await loginApi
  setStorage
  setStorage
  const redirect = route.query.redirect || '/'
  router.push
}

组件内守卫：表单未保存提示

有时候用户在页面里填了表单，还没保存就跳转了那数据不就白填了？这时候就得用组件内守卫来拦一下：

import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave => {
  if  {
    if ) {
      next
    } else {
      next
    }
  } else {
    next
  }
})

加载状态处理

跳转页面时数据还没加载完，页面就白屏了？那体验也不好。加个 loading 状态，用户就知道“页面正在加载中”，心里有底：

import { ref } from 'vue'
export const isLoading = ref
router.beforeEach => {
  isLoading.value = true
  next
})
router.afterEach => {
  setTimeout => {
    isLoading.value = false
  }, 500)
})

React Router 怎么搞？

React Router 没有 beforeEach、afterEach 这些 API 了别再用旧版本的写法了。现在推荐用组件封装的方式，比如写个 PrivateRoute 组件，配合 Outlet 使用：

import { Navigate, Outlet } from 'react-router-dom'
import { getStorage } from '@/utils/storage'
export const PrivateRoute =  => {
  const token = getStorage
  const userRole = getStorage?.role || ''
  if  {
    return 
  }
  if  {
    return 
  }
  return 
}

然后在路由配置里这么用：

{
  path: '/user',
  element: ,
  children: 
}

常见坑点

坑一：忘记调用 next，页面卡死

坑二：未处理“登录后跳转回原页面”，体验变差

坑三：只判断是否登录，不判断角色，导致权限混乱

坑四：跳转时数据未加载完就渲染页面白屏或数据错乱

坑五：路由守卫逻辑写在组件里导致权限控制不统一

说实话，这些坑，咱就是说dou是Ke以提前规避的。只要你在写路由守卫的时候，逻辑清晰、结构合理，基本不会踩坑。

为什么百度不收录？

你可Neng会问，为啥百度不收录？这跟路由守卫有啥关系？其实Ru果页面跳转时没有正确处理权限或加载状态，导致页面内容不完整，或者跳转逻辑混乱，百度蜘蛛抓取时就会认为页面不稳定，从而不收录。所以路由守卫写得好，不仅用户体验好，SEO 也Neng加分。

所以别小kan这个路由守卫，它可是前端权限控制的核心。不管是 Vue 还是 React，逻辑dou是一样的——控制路由的访问权限和跳转逻辑。一套封装，就Neng覆盖所有场景，复制就Neng用，别再从零写了。

干货

路由守卫是前端权限管控的核心。Vue 和 React 用法虽有差异，但逻辑一致——判断登录状态、校验角色、控制跳转。一套封装就Neng覆盖所有场景，避开 5 个高频坑，复制就Neng实现权限管控。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

---