另一种实现在认证后重定向到原始请求资源的方法(不使用查询参数,使用@angular/router 3.0.0)是使用
RouterStateSnapshot.url
。该字符串包含用户请求的资源的URL。在失败的身份验证尝试后将用户重定向回登录表单之前,在
CanActivate
钩子中,从
RouterStateSnapshot.url
获取所请求的URL,并将其存储在一个可访问您的登录函数的变量中。当用户成功登录时,只需重定向到存储的URL即可。以下是示例:
import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class GuardService implements CanActivate {
constructor( private router: Router, private authService: AuthService ) {}
canActivate(state: RouterStateSnapshot): boolean {
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.authService.loggedIn()) { return true; }
this.authService.redirectUrl = url;
this.router.navigate([ '/login' ]);
return false;
}
}
我的AuthService(如下所示),用于执行登录,成功登录后将重定向用户到最初请求的资源。
import { Injectable, Inject } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { Router } from '@angular/router';
import { Headers, Http, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import './../rxjs-operators';
const API_URL: string = '';
@Injectable()
export class AuthService {
public redirectUrl: string = '';
constructor( @Inject('API_URL') private apiURL: string, private router: Router, private http: Http ) {}
public loggedIn(): boolean {
return tokenNotExpired('token');
}
public authenticate(username: string, password: string) {
let body: string = JSON.stringify({ un: username, pw: password});
let headers: Headers = new Headers({ 'Content-Type': 'application/json' });
let options: RequestOptions = new RequestOptions({ headers: headers });
return this.http.post(this.apiURL + '/authenticate', body, options)
.map(res => res.json())
.subscribe(res => {
localStorage.setItem('token',res.token);
this.redirect();
});
.catch(this.handleError);
}
private redirect(): void {
this.router.navigate([ this.redirectUrl ]);
}
}
这是您的应用程序如何在不使用查询参数的情况下记住最初请求的资源。
欲了解更多详细信息,请参阅angular.io上的示例指南,从“GUARD THE ADMIN FEATURE”部分开始:
https://angular.io/guide/router#guard-the-admin-feature
希望这能对某些人有所帮助。
isUserAuthenticated
中的问题。我的问题是如何生成登录后重定向用户返回的 URL。 - David Barreto