[英]Angular 2 and JWT authentication (Auth0)
我有一个带有JWT身份验证(Auth0)的angular 2应用程序,该应用程序在用户登录后将配置文件和令牌ID存储在localStorage中,该配置文件包含“角色”属性以检查用户是否可以访问特定页面。 一切都像一个超级按钮,但是如果用户将localStorage中的role属性更改为“ 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>
任何想法,将不胜感激
我认为,当您具有JavaScript前端框架时,就不可能创建完全安全的页面/表单。 我的意思是,当所有应用程序都下载到客户端并在客户端构建时,总是有可能打开任何表单。
对我来说,确保后端api的安全并为初级开发人员留出“黑客”机会的重要性很重要。
如果您有这样的要求,请尝试使用服务器端生成的框架:php,asp.net mvc,jsp等。
更新
在发布时,Angular2具有指令@CanActivate ,它提供了取消航海的更准确方法。 但是,在基于javascript的前端应用程序中,服务器端授权至关重要。
这将有助于如何在express后端中处理JWT: express-jwt
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.