Угловая ролевая защита от вопроса клиента

Question

Я новичок в angular и гуглю по этому поводу, но на самом деле не нашел ничего полезного (вероятно, мои термины в Google, которые я использую).

В традиционном серверном приложении вы можете сгенерироватьстраница, которая имеет различные элементы управления / функции / макет / и т. д. на основе аутентифицированного пользователя.Поскольку все это делается на стороне сервера, два разных пользователя (которые видят две разные вещи) понятия не имеют, что может увидеть другой пользователь.Поскольку все это на стороне сервера, нет способа запустить fiddler или какой-либо другой инструмент для извлечения всех машинописных текстов / javascript / html / и т. Д.

В угловом представлении, допустим, у вас есть маршруты для ролей ClientRole =>/ pages / 1, / pages / 2 AdminRole => / pages / 1, / pages / 2, / pages / admin / 1, / pages / admin / 2

Для маршрутов, я думаю, вы быпросто отправляйте новый список маршрутов через наблюдаемое хранилище / ngrx в любое время, когда пользователь изменяет аутентификацию, чтобы обновить список маршрутов (таким образом, кто-то не может пройти через «файл маршрутов», чтобы увидеть, что существует маршрут «/ page / admin», если онине в роли, которая имеет этот маршрут)?

Как это может работать с компонентами?Так что, если бы кто-то попытался провести обратный инжиниринг компонентов на стороне клиента, у них даже не было бы «компонентов администратора» на стороне клиента, если бы они не были зарегистрированы и в роли администратора?

Answer 1

Пусть ваш токен jwt содержит что-то вроде level, которое может быть "user" или "admin".Как только они войдут в систему, вы можете позвонить isLoggedIn() в вашей guard службе.

Так же в вашей auth.service.ts:

private isLoggedInAs = new BehaviorSubject<any>('');
isLoggedIn = this.isLoggedInAs.asObservable();

// check if user is logged in, and if so with what level
public isLoggedIn() {
    // insert relevant filters that will return false
    const jwtpayload = jwt.decode(this.getToken());
    this.updateLoggedIn(jwtpayload.level);
    return true;
}

updateLoggedIn(level: string) {
  this.isLoggedInSource.next(level);
}

И в вашем guard.service.ts:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
        this.router.navigate(['/pages']);
        return false;
    } else {
        return true;
    }
}

А там, где вам нужно знать их уровень, вы можете сделать что-то вроде этого:

ngOnInit() {
    this.authService.isLoggedIn.subscribe(isLoggedIn => {
        if (isLoggedIn) {
            this.isLoggedIn = isLoggedIn;
        } else {
            this.isLoggedIn = 'anonymous';
        }
    });
}