Angular 2 和 JWT 身份验证 (Auth0)

Question

我有一个带有 JWT 身份验证 (Auth0) 的 Angular 2 应用程序，在用户登录后将配置文件和令牌 ID 存储在 localStorage 中，配置文件包含一个“角色”属性来检查用户是否可以访问特定页面。 一切都像一个魅力，但如果用户将 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>

任何想法都将不胜感激

Answer 1

在我看来，如果您拥有 JavaScript 前端框架，就不可能创建完全安全的页面/表单。我的意思是，当所有应用程序都下载到客户端并在客户端构建时，总是有可能打开任何表单。

对我来说，保护后端 api 的安全很重要，并将“黑客”机会留给初级开发人员。

如果你有这样的需求，尝试使用服务器端生成的框架：php、asp.net mvc、jsp & etc。

更新

当它出现时，Angular2 有指令@CanActivate，它提供了更准确的方法来取消导航。但服务器端授权在基于 javascript 前端的应用程序中至关重要。

这将有助于如何处理快递后端的JWT：express-jwt