Аутентификация с угловым 2 и JWT (Auth0)

Question

У меня есть приложение с угловым 2 с аутентификацией JWT (Auth0), которое после входа пользователя сохраняет идентификатор профиля и токена в localStorage, профиль содержит атрибут «role», чтобы проверить, может получить доступ к специальной странице. Все работает как шарм, но если пользователь меняет свойство role в localStorage на «admin», например, и перезагружает приложение, он может получить доступ к страницам, на которые он не авторизован. Как я могу справиться с этим?

auth.service.ts:

declare var Auth0Lock: any; 

@Injectable() 
export Class AuthService { 

lock = new Auth0Lock(ID, domain); 
user: Object; 

constructor() { 
    this.user = JSON.parse(localStorage.getItem('profile')); 
} 

public login() { 
    // Auth0 method 
    this.lock.show({}, (err: string, profile: Object, token: string) => { 
    if (err) { console.log(err); return; } 

    localStorage.setItem('profile', JSON.stringify(profile)); 
    localStorage.setItem('id_token', token); 
    }); 
} 

public logout() { 
    localStorage.removeItem('profile'); 
    localStorage.removeItem('id_token'); 
} 

public loggedIn() { 
    return tokenNotExpired(); 
} 

public isAdmin() { 
    if (this.user['role'] == 'admin') { 
    return true; 
    } else { 
    return false; 
    } 
} 
} 

app.component.ts:

// imports, etc 
export Class AppComponent { 
    constructor(private auth: AuthService) {} 
} 

app.component.html:

<nav> 
    <ul> 
    <li><a [routerLink]="['Customers']" *ngIf="auth.loggedIn()">Customers</a></li> 
    <li><a [routerLink]="['Admin']" *ngIf="auth.loggedIn() && auth.isAdmin()">Admin</a></li> 
    </ul> 
</nav> 

Любые идеи для обработки это будет appre ciated

Answer 1

На мой взгляд, невозможно создать полностью защищенные страницы/формы, когда у вас есть интерфейсная инфраструктура JavaScript. Я имею в виду, что всегда есть возможность открыть любую форму, когда все приложения загружаются и создаются на стороне клиента.

Для меня важно обеспечить обратную поддержку api и оставить возможности «взлома» для младших разработчиков.

Если у вас есть такие требования, попробуйте использовать на стороне сервера генерируемый рамки: PHP, ASP.NET MVC, JSP & т.д.

UPDATE

Как придумали, Angular2 имеет директиву @CanActivate, которая дает более точный способ отмены навигации. BUT авторизация на стороне сервера является CRITICAL в приложениях на основе интерфейсов javascript.

Это поможет, как бороться с JWT экспресс фоновым: express-jwt