在Nuxt和Vue应用中如何阻止用户直接通过地址栏访问admin路由

核心思路 #

你遇到的问题本质是单页应用(SPA)的路由跳转分两种场景：应用内点击链接触发的内部路由跳转、用户直接修改地址栏/刷新页面触发的冷访问场景，只要对两种场景做统一拦截即可覆盖全部权限校验需求。

按路由模式实现原生拦截 #

如果不依赖框架路由能力，可以通过原生浏览器事件实现全场景捕获：

1. Hash路由（URL带#前缀） #

地址栏修改hash值会触发全局hashchange事件，直接监听事件做校验即可：

window.addEventListener('hashchange', (e) => {
  const targetPath = window.location.hash.slice(1)
  // 校验目标路径是否为管理员专属路径+当前用户身份
  if (isAdminRoute(targetPath) && !currentUser.isAdmin) {
    e.preventDefault()
    // 回退到上一个地址或跳转到403/登录页
    window.location.hash = e.oldURL.split('#')[1] || '/'
  }
})

2. History路由（URL无#，需要后端配合） #

需要做两层拦截覆盖全场景：

• 前端监听popstate事件，处理前进后退、地址栏修改同源路径的场景：

window.addEventListener('popstate', (e) => {
  const targetPath = window.location.pathname
  if (isAdminRoute(targetPath) && !currentUser.isAdmin) {
    // 恢复上一个历史记录
    history.pushState(null, '', document.referrer)
    // 跳转到无权限提示页
    window.location.replace('/403')
  }
})

• 后端兜底：所有路由请求都返回SPA入口HTML，同时后端可提前做路径权限校验，无权限直接返回403页面或者重定向到登录页，避免前端校验被绕开。

主流框架的开箱即用方案 #

主流框架路由都内置了全局守卫能力，不用手动监听原生事件，自动覆盖所有跳转场景：

• Vue Router：使用beforeEach全局前置守卫，给管理员路由加meta标记做校验

// 路由配置示例
const routes = [
  { path: '/admin', component: AdminPage, meta: { requiresAdmin: true } }
]
// 全局守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAdmin && !currentUser.isAdmin) {
    next('/403')
  } else {
    next()
  }
})

• React Router v6：封装权限守卫组件包裹管理员路由

// 管理员权限校验组件
const AdminGuard = ({ children }) => {
  if (!currentUser.isAdmin) return <Navigate to="/403" replace />
  return children
}
// 路由配置
<Route path="/admin" element={
  <AdminGuard>
    <AdminPage />
  </AdminGuard>
} />

• Next.js：使用middleware.ts全局中间件，所有请求包括直接地址栏访问都会先经过中间件校验

// middleware.ts
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/admin') && !request.cookies.get('admin_token')) {
    return NextResponse.redirect(new URL('/403', request.url))
  }
}

重要注意事项 #

• 前端权限校验只是用户体验优化，绝对不能作为唯一的权限控制手段，所有管理员相关的接口都必须在后端做权限校验，避免用户通过控制台修改前端代码绕开校验。
• 如果是多页应用(MPA)，所有页面的权限校验直接在服务端渲染时做判断即可，无权限直接返回对应状态码页面。

内容的提问来源于stack exchange，提问作者Luckytechy