Angular2 Authguard用户登录

所以我有后端设置，如果我POST登录，然后它开始一个会话，如果我注销登录，它会结束该会话。我想编写Angular2 auth guard，以便跟踪用户是否登录。Angular2 Authguard用户登录

//login.component.ts

export class LoginComponent implements OnInit { 
    questions: any[]; 
    error_message: string = 'Login Unsuccessful' 

    constructor(public router: Router, 
    private authenticationService: AuthenticationService, 
    question_service: LoginQuestionService) { 

    this.questions = question_service.getQuestions(); 
    this.authenticationService.logged_in.subscribe((value) => { 
     console.log("Login Status: " + value); 
    }); 
    } 

    ngOnInit() { 
    } 

    formSubmitted(data): void { 
    this.login(data.username, data.password); 
    } 


    login(username, password) { 
    event.preventDefault(); 
    this.authenticationService.login(username, password) 
    .subscribe(
     response => { 
     this.authenticationService.logged_in.next(true); 
     this.router.navigate(['home']); 
     }, 
     error => { 
     this.authenticationService.logged_in.next(false); 
     alert(this.error_message); 
     this.router.navigate(['login']); 
     console.log(error); 
     } 
    ); 
    };

//authenticationservice.ts

@Injectable() 
export class AuthenticationService {  
    private base_url: string; 
    public logged_in: Subject<boolean> = new Subject(); 
      
    constructor(private http: Http) { 
     this.base_url = 'http://localhost:3000/'; 
    } 

    login(username: string, password: string): Observable<Response> { 
     let query_url = `${this.base_url}login`; 
     let payload = JSON.stringify({username: username, password: password}); 
     return this.http.post(query_url, payload) 
     .map(res => res.json()) 
     .catch((error:any) => Observable.throw(error.json())); 
    } 

    logout(): Observable<Response>{ 
     let query_url = `${this.base_url}logout`; 
     return this.http.post(query_url, null); 
    } 
}

将如何去写一个auth戒备的跟踪变量的服务？跟踪登录的最佳方式是什么？我知道在AngularJS中，有$ rootcope变量，但在Angular2中不可用

来源

2017-06-29 PowerLove

您应该使用JWT令牌作为@crash状态。这是检查用户是否登录的快速且安全的方法。 –

在SO中处理相当多。

我建议看看这个模块https://github.com/auth0/angular2-jwt来处理一般的jwt令牌和认证。

来源

2017-06-29 13:38:23 crash

我不认为这会帮助tho。我在谈论所有前端工作 – PowerLove

我知道，如果你想看看它，我在这里使用它：https：//github.com/damnko/angular2-django-movies。你熟悉jwt令牌吗？否则，您只需在身份验证服务中创建一个可观察/主题以跟踪登录状态。但我认为这不是最好的方法 – crash

Angular2 Authguard用户登录

回答

相关问题