登录后返回用户信息的方案及前端存储安全性咨询

问题背景 #

我搭建了Spring Boot授权服务器与资源服务器，采用OAuth2密码模式，同时开发Angular前端应用调用资源服务器接口，资源服务器通过授权服务器校验令牌。现在想咨询登录后传递用户信息（如角色、用户ID）的最佳方案，需要用这些信息实现页面切换、功能显隐及获取用户专属数据。

我已经实现了CustomTokenEnhancer向令牌响应添加额外信息，代码如下：

@Override 
public OAuth2AccessToken enhance(OAuth2AccessToken accessToken, OAuth2Authentication authentication) { 
    final Map<String, Object> additionalInfo = new HashMap<>(); 
    User user = (User) authentication.getPrincipal(); 
    additionalInfo.put("id", user.getId()); 
    additionalInfo.put("username", authentication.getName()); 
    additionalInfo.put("organization", user.getOrganization()); 
    additionalInfo.put("roles", user.getRoles()); 
    ((DefaultOAuth2AccessToken) accessToken).setAdditionalInformation(additionalInfo); 
    return accessToken; 
}

令牌请求响应示例：

{
  "access_token": "233fda99-3ff7-4766-bfa3-3b211280c64f",
  "token_type": "bearer",
  "refresh_token": "286e7324-9b8a-46de-a0c7-45e21be552d4",
  "expires_in": 35999,
  "scope": "read write",
  "organization": "organization",
  "roles": [
    {
      "id": "1",
      "createdAt": null,
      "name": "ROLE_admin",
      "permissions": [
        { "id": "1", "createdAt": null, "name": "create_profile" },
        { "id": "2", "createdAt": null, "name": "read_profile" },
        { "id": "3", "createdAt": null, "name": "update_profile" },
        { "id": "4", "createdAt": null, "name": "delete_profile" }
      ]
    }
  ],
  "id": 1,
  "username": "test"
}

我的问题是：将角色等信息存入localStorage，用于前端页面元素显隐是否安全？

首先得给你明确一个核心结论：把角色、用户ID这类信息存在localStorage里做前端页面显隐，只能当作「体验优化手段」，绝对不能作为「安全校验的依据」，下面具体拆解风险和更合理的方案：

一、直接存在localStorage的核心风险 #

• 篡改成本极低：localStorage是存储在浏览器本地的明文字符串，任何人打开开发者工具就能轻松修改里面的内容——比如把普通用户的角色改成ROLE_admin，就能看到原本管理员专属的按钮或页面。虽然后端接口会做权限校验，但前端的视觉欺骗可能误导用户，甚至引发不必要的操作困惑。
• XSS攻击易被利用：如果你的前端存在XSS漏洞，攻击者可以通过注入恶意脚本读取localStorage里的用户信息，即便令牌是存在Authorization头里，用户角色、ID这类信息泄露也可能被用来发起针对性攻击。

二、更安全的替代方案（结合你的技术栈） #

1. 内存存储用户信息（首推） #

在Angular里可以写一个全局的AuthService，登录成功后把用户信息存在服务的内存变量中，而非持久化到localStorage：

@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUserSubject: BehaviorSubject<User>;
  public currentUser: Observable<User>;

  constructor() {
    this.currentUserSubject = new BehaviorSubject<User>(null);
    this.currentUser = this.currentUserSubject.asObservable();
  }

  login(credentials: LoginCredentials) {
    return this.http.post('/oauth/token', credentials).pipe(
      tap((response: any) => {
        // 把用户信息存入内存变量
        const user = {
          id: response.id,
          username: response.username,
          roles: response.roles,
          organization: response.organization
        };
        this.currentUserSubject.next(user);
        // 令牌建议存在sessionStorage或内存，避免持久化
        sessionStorage.setItem('access_token', response.access_token);
        sessionStorage.setItem('refresh_token', response.refresh_token);
      })
    );
  }

  getCurrentUser(): User {
    return this.currentUserSubject.value;
  }
}

页面刷新后用户信息会丢失，这时可以通过refresh_token静默刷新获取新令牌和用户信息，安全性比localStorage高很多——既不会被篡改，也很难被XSS窃取。

2. 前端仅存令牌，按需调用后端接口获取用户信息 #

如果担心页面刷新丢失用户信息，可以只在前端存储access_token，同时后端提供一个/api/user/me接口，前端在应用初始化时（比如AppComponent的ngOnInit方法里）调用这个接口，获取当前用户的角色、ID等信息后存入内存。

这种方案的优势是：所有用户信息都是后端实时返回的，不会存在前端缓存旧数据的问题，而且后端可以在接口里再次校验令牌有效性，确保用户信息的真实性。

3. HttpOnly Cookie存令牌+内存存用户信息 #

如果前后端是同域部署，可以把access_token和refresh_token存在HttpOnly的Cookie中，这样XSS攻击无法读取令牌，安全性进一步提升。前端依然用内存存储用户信息，页面刷新时调用/api/user/me接口获取最新数据。

三、前端页面显隐的正确姿势 #

不管用哪种方案，前端做页面元素显隐时，只能基于内存中的用户信息做展示控制，但核心权限必须由后端校验。比如Angular里用*ngIf控制按钮显示：

<button *ngIf="currentUser?.roles.some(role => role.name === 'ROLE_admin')" (click)="deleteProfile()">删除用户</button>

但用户点击按钮时，后端接口必须再次校验该用户是否真的拥有delete_profile权限，绝对不能因为前端显示了按钮就跳过权限校验。

总结 #

• 不推荐把用户角色、ID这类信息存在localStorage，风险过高；
• 优先选择内存存储用户信息，配合refresh_token静默刷新机制；
• 前端的页面显隐只是优化用户体验，后端的权限校验才是安全的核心防线。

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