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

令狐佳杰提问于 2026-03-02 10:08:19 阅读 8

安全

我在用 Vue 做后台管理系统，现在想根据用户角色显示不同菜单。但听说前端鉴权只是“障眼法”，后端不校验照样能被绕过？那我前端还有必要做权限控制吗？

目前我是这样写的：

const userRole = localStorage.getItem('role');
if (userRole === 'admin') {
  showAdminMenu();
} else {
  showUserMenu();
}

但感觉只要别人改下 localStorage 就能冒充管理员了，这不就白做了？到底该怎么处理才合理？

我来解答赞 4 收藏

反馈

1 条解答

Mr-天琪 Lv1

你说得没错，前端权限确实防不住有心人，localStorage 随便改。但前端还是要做的，用户体验好，没权限的按钮直接藏掉，省得用户点了再报错。

正确姿势是这样的：前端管 UI 展示，后端管真正的权限校验。菜单数据让后端接口返回，别在前端硬编码判断。试试这个思路：

// 路由守卫里做

router.beforeEach(async (to, from, next) => {

  const token = localStorage.getItem('token');

  if (!token) return next('/login');

  

  // 每次都向后端请求用户信息和权限菜单

  const userMenu = await api.getUserMenu();

  store.commit('setMenu', userMenu);

  next();

});

后端每个接口都要校验 token 和权限，前端被绕过也无所谓，反正接口会拦住。前端就是个"装饰"，别指望它当保安。

2026-03-02 10:10