前端路由权限控制怎么做才安全？

IT人常青提问于 2026-03-05 13:10:22 阅读 14

安全

我在用 Vue 做后台管理系统，现在想根据用户角色动态控制能访问的页面。目前是登录后把菜单和路由权限存在 Vuex 里，然后在 router.beforeEach 里判断：

router.beforeEach((to, from, next) => {
  if (!store.state.userRoutes.includes(to.name)) {
    next('/403')
  } else {
    next()
  }
})

但同事说这样不安全，因为前端路由都能被绕过，只要知道路径就能直接输入地址访问。那我是不是还得在每个页面组件里再加一层判断？或者有更靠谱的做法？

我来解答赞 2 收藏

反馈

1 条解答

程序猿洋洋 Lv1

你这个问题确实，前端防君子不防小人，必须后端配合。我给你个完整方案：

1. 前端保持现有的路由守卫检查
2. 后端接口要加权限校验，比如：

// 所有API请求前校验

axios.interceptors.request.use(config => {

  if (!hasPermission(config.url)) {

    return Promise.reject('没权限')

  }

  return config

})

3. 每个页面的初始化数据请求也要做权限校验，没权限的直接401

这样就算绕过前端路由，没权限的接口也拿不到数据，页面照样废。搞了十几年后台系统都这么干的，靠谱。

2026-03-05 14:09