如何將AngularJS 1.5的組件路由器與用戶身份驗證結合使用？

我還沒有準備好進入Angular 2，但我想解決他們的新路由器和組件。如何將AngularJS 1.5的組件路由器與用戶身份驗證結合使用？

對於背景，我在Google App Engine上使用端點與Angular結合使用的Python實例。

如何使用AngularJS 1.5的組件路由器提供帶有和未經過身份驗證的用戶的HTML？我希望儘可能以最「角度」的方式完成這項工作。目前的文檔在我身上丟失了。

來源

2016-03-27 David Kirk

我問自己同樣的問題。看來使用Angular 2版本的一種方法是擴展RouterOutlet，但我無法找到Angular 1.5的方式。 – Boris

@Boris'$ canActivate'看起來像是我可以拒絕訪問的地方，如果用戶通過返回返回false的承諾退出。在裏面，我想我可以'$ rootRouter.navigate（[「LogIn」]）'。 –

同意，但我希望有一個更通用的解決方案，您可以處理任何路由的身份驗證，而不是每個組件的解決方案。 – Boris

最近我掙扎着同樣的事情。我解決了它這樣的：

在組件定義對象添加$ canActivate屬性：

import { MainController } from './main.controller'; 

export class MainComponent { 

    constructor() { 
     this.controller = MainController; 
     this.templateUrl = 'app/main/main.html'; 
     this.$canActivate = (Auth) => { 
      'ngInject'; 

      return Auth.redirectUnauthenticated(); 
     }; 
    } 
}

創建身份驗證服務，它包含所有的身份驗證信息：

export class AuthService { 

    constructor($auth, UserApi, $q, $rootRouter, Storage) { 
     'ngInject'; 

     this.$auth = $auth; 
     this.$q = $q; 
     this.$rootRouter = $rootRouter; 
     this.storage = Storage; 
     this.userApi = UserApi.resource; 
    } 

    /** 
    * Check user's status 
    */ 
    isAuthenticated() { 
     return this.$auth.isAuthenticated(); 
    } 

    /** 
    * Redirect user to login page if he is not authenticated 
    */ 
    redirectUnauthenticated() { 
     if (!this.$auth.isAuthenticated()) { 
      this.$rootRouter.navigate(['Login']); 

      return false; 
     } 

     return true; 
    } 
}

注：$身份驗證服務來從satellizer庫。

基本上，在每個組件（您可以導航到）中，只需要經過身份驗證的訪問權限，就放置相同的$ canActivate屬性。我不知道這是否是最好的解決方案，但它的工作原理:)

來源

2016-06-09 13:00:05 stic

如何將AngularJS 1.5的組件路由器與用戶身份驗證結合使用？

回答

相關問題