Javascript 如何防止编辑localStorage的一部分

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

我想禁止干扰用户角色

现在在

authentication.service.t

s中我得到了

   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;
            }));
    }

现在，当我打开开发者工具时，我可以编辑从用户到管理员的角色，并且我可以访问所有管理员页面

有没有办法保护此角色参数

还有警卫

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;
    }
}

我应该如何保护本地存储？ 例如，我还想保护页面上的元素 if Admin然后show else not（我知道怎么做，但有一个问题，因为每个人都可以编辑localStorage）

---

---

所以我不想只保护用于存储此类数据的路由

用户服务变量。但是，如果您只想使用localstorage，请在存储之前使用bcrypt或其他方法对数据进行加密。并在从localstorage获取数据后对其进行解密。

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

您无法保护localstorage。它存储在用户浏览器上，并在用户的完全控制范围内。对于本地存储，与cookie相同的安全原则适用：不要在其中存储用户不允许更改的信息！通常这些角色不存储在本地/会话存储中。如果要动态验证角色，请从存储中检索令牌并从中提取角色。尽量不要在浏览器存储中存储任何敏感信息。在浏览器存储中存储角色没有问题，只需在执行操作之前在服务器上验证即可。所以用户可以给他们访问权限，但在服务器上，如果他们请求数据，您可能会出错。@MarcinDomorozki当然可以。想象一下，在Facebook上，有时您需要密码，但有时不需要lol。通常在nodejs上下文中，您有一个中间件对特定路由上的每个请求进行检查。您无法保护localStorage。它存储在用户浏览器上，并在用户的完全控制范围内。对于本地存储，与cookie相同的安全原则适用：不要在其中存储用户不允许更改的信息！通常这些角色不存储在本地/会话存储中。如果要动态验证角色，请从存储中检索令牌并从中提取角色。尽量不要在浏览器存储中存储任何敏感信息。在浏览器存储中存储角色没有问题，只需在执行操作之前在服务器上验证即可。所以用户可以给他们访问权限，但在服务器上，如果他们请求数据，您可能会出错。@MarcinDomorozki当然可以。想象一下，在Facebook上，有时你需要密码，但有时不需要lol。通常在nodejs上下文中，你有一个中间件对特定路由上的每个请求进行检查。但是逻辑将是可见的，因此不需要火箭科学来进行加密/解密。客户端上的一切都是可见的。如果您的用户非常聪明，可以看到您的捆绑包和代码。您不应在客户端存储机密信息。有一个令牌或其他东西可以始终从服务器获取此类数据。但即使在这种情况下，如果其未加密，用户可以看到网络标签对吗？如果一个用户可以访问信息和您的系统，他当然可以看到所有的数据。你只能把一把质量好、牢不可破的锁锁起来，防止没有钥匙的人把门锁上。如果有人拥有密钥，那么该锁的用途是什么，对吗？我认为对于OP来说，它不是正确的解决方案，但我在过去成功地使用了这种技术来加密设备上的缓存数据。在我的例子中，当离线登录@Injectable（）服务属性时，我们提示用户输入密码并由此派生解密密钥。但它将在刷新时丢失。但是，如果您的用户可以读取代码，并且可以在开发工具中设置断点。他将能够编辑它。现在我可以显示用户在localStorage中的角色，但如果任何“智能”用户想要编辑它，他可以…但它对元素不起作用：）但是逻辑将是可见的，因此不需要火箭科学来做加密/解密，客户端上的一切都是可见的。如果您的用户非常聪明，可以看到您的捆绑包和代码。您不应在客户端存储机密信息。有一个令牌或其他东西可以始终从服务器获取此类数据。但即使在这种情况下，如果其未加密，用户可以看到网络标签对吗？如果一个用户可以访问信息和您的系统，他当然可以看到所有的数据。你只能把一把质量好、牢不可破的锁锁起来，防止没有钥匙的人把门锁上。如果有人拥有密钥，那么该锁的用途是什么，对吗？我认为对于OP来说，它不是正确的解决方案，但我在过去成功地使用了这种技术来加密设备上的缓存数据。在我的例子中，当离线登录@Injectable（）服务属性时，我们提示用户输入密码并由此派生解密密钥。但它将在刷新时丢失。但是，如果您的用户可以读取代码，并且可以在开发工具中设置断点。他可以编辑它。现在我可以在localStorage中显示用户角色，但如果任何“智能”用户想要编辑它，他可以…但它不适用于元素：）

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;
    }
}