如何防止编辑localStorage的一部分

Question

我从 [JasonWatMore][1] 获得了一个示例代码，它是基于角色的授权，我尝试自己做，效果很好，但我发现了一个大问题。

我想禁止干扰用户角色

现在在authentication.service.t我得到了

   login(username: string, password: string) {
        return this.http.post<any>(`/users/authenticate`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));
    }

来自后端的所有数据都位于 localSotrage 中，看起来像

{id: 1, username: "admin", firstName: "Admin", lastName: "User", role: "User",…}
firstName: "Admin"
id: 1
lastName: "User"
role: "User"
token: "fake-jwt-token.Admin"
username: "admin"

现在，当我打开开发人员工具时，我可以将角色从用户编辑为管理员，并且我获得了对管理页面的所有访问权限。

有什么方法可以保护这个角色参数吗？

并且有守卫

export class AuthGuard implements CanActivate {
    constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser) {
            // check if route is restricted by role
            if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
                // role not authorised so redirect to home page
                this.router.navigate(['/']);
                return false;
            }

            // authorised so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

我应该如何保护 localStorage？ 我还想保护页面上的元素，例如，如果管理员然后不显示其他内容（我知道该怎么做，但有一个问题，因为每个人都可以编辑 localStorage）所以我不想只保护路由

Answer 1

用于存储此类数据的用户服务变量。 但是，如果您只想使用本地存储，请在存储之前使用 bcrypt 或其他方式加密数据。 从本地存储中获取后解密。