Angular 2和JWT身份驗證（Auth0）

Question

我有一個帶有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>

任何想法，將不勝感激

Answer 1

我認為，當您具有JavaScript前端框架時，就不可能創建完全安全的頁面/表單。 我的意思是，當所有應用程序都下載到客戶端並在客戶端構建時，總是有可能打開任何表單。

對我來說，確保后端api的安全並為初級開發人員留出“黑客”機會的重要性很重要。

如果您有這樣的要求，請嘗試使用服務器端生成的框架：php，asp.net mvc，jsp等。

更新

在發布時，Angular2具有指令@CanActivate ，它提供了取消航海的更准確方法。 但是，在基於javascript的前端應用程序中，服務器端授權至關重要。

這將有助於如何在express后端中處理JWT： express-jwt