React路由角色权限隐患：LocalStorage角色可被篡改致路由暴露

是的，只要有人把localStorage里的角色值改成admin，你的前端Admin路由对应的UI就会被随意访问。你当前的前端鉴权逻辑完全依赖localStorage存储的user_Role，只要这个值匹配admin，AdminAuth组件就会直接放行，渲染Admin页面的UI内容。

不过你已经在后端给Admin路由做了安全防护，这一点能守住核心安全底线——就算攻击者能看到前端的Admin界面，也没法通过后端接口获取或修改敏感数据，因为后端会重新验证用户的真实权限，不会轻信前端传来的角色信息。

但前端UI暴露还是存在风险，比如攻击者能摸清后台的页面结构、功能模块，所以可以优化下前端鉴权逻辑：

• 别用localStorage存储敏感权限信息，改用HttpOnly Cookie存储用户认证凭证（比如JWT），前端只负责在请求时携带这个凭证，权限判断交给后端接口实时验证
• 让AdminAuth组件在初始化时调用后端的权限校验接口，拿到用户真实角色后再决定是否渲染Admin页面，而不是直接读取localStorage里的值

你当前使用的鉴权组件代码 #

import React from "react";

import { Link, Navigate } from "react-router-dom";
import { isAutheticated } from "../auth";

export const AdminAuth = ({ children, redirectTo }) => {
  let auth = isAutheticated().user_Role;
  return auth === "admin" ? children : <Navigate to={redirectTo} />;
};

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