如何防止编辑localStorage的一部分

我从[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？我也想保护页面上的元素，例如如果Admin然后不显示其他内容（我知道该怎么做，但是有一个问题，因为每个人都可以编辑localStorage），所以我不想只保护路由