Как запретить редактировать одну часть localStorage

Question

Я получил пример кода из [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;
            }));
    }

Где все данные из бэкэнда находятся в 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"

и теперь, когда я открываю инструменты разработчика, я могу изменить роль с пользователя на администратора, и я получил полный доступ к страницам администратора.

Есть ли способ защитить этот параметр роли?

И там is guard

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 затем не показывает else (я знаю, как это сделать, но есть проблема, потому что каждый может редактировать localStorage), поэтому я не хочу защищать только маршруты

Answer 1

Пользовательские служебные переменные для хранения таких данных. Но все же, если вы хотите использовать только localstorage, зашифруйте данные с помощью bcrypt или чего-то еще перед сохранением. и расшифровать его после получения из локального хранилища.