【发布时间】：2018-01-15 21:00:32
【问题描述】：
我是 Angular 新手，我正在开发一个使用 Angular 5 作为前端，Laravel5.5 作为后端的项目。
我想要做什么： 我正在执行基于令牌的身份验证，以检查是否正确的用户正在向后端发送请求，如果令牌未通过身份验证，它将引发异常并且用户将被重定向到登录页面。
我做了什么： 我按照 Youtube 上的教程使用 Authguard 来验证用户，下面是我的代码。
auth.guard.ts
import {Injectable} from "@angular/core";
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from "@angular/router";
import {UserService} from "../_services/user.service";
import {Observable} from "rxjs/Rx";
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private _router: Router, private _userService: UserService) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
console.log("AuthGuard.ts: "+ currentUser);
if (currentUser == null) {
this._router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
return false;
}
else{
let response = this._userService.verify().map(
data => {
console.log("This is the data returned in authguard: "+data)
if (data !== null) {
// logged in so return true
// console.log("Not null");
return true;
}
// error when verify so redirect to login page with the return url
this._router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
return false;
},
error => {
console.log('myerror');
// error when verify so redirect to login page with the return url
this._router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
return false;
});
console.log("response : "+ typeof response);
return response;
}
}
}
在教程中他们使用订阅而不是地图，但我做了一些研究，发现我们不能将订阅与 Observable 一起使用。
我的代码虽然显示了订阅错误并将用户重定向到登录页面，但订阅它不会返回 true 或 false，因此即使凭据正确，用户也不会重定向到下一页。
这是验证功能的代码。
user.service.ts
import {Injectable} from "@angular/core";
import { HttpClient , HttpHeaders , HttpErrorResponse } from '@angular/common/http';
import {User} from "../_models/index";
import { Observable } from 'rxjs';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
interface DataResponse { status: string; }
@Injectable()
export class UserService {
constructor(private http: HttpClient) {
}
verify(): Observable<any> {
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
let headers = new HttpHeaders({'Authorization': 'Bearer ' + currentUser.token});
let abc = this.http.get<DataResponse>('http://127.0.0.1:8000/api/auth/verify', {headers:headers}).map(response =>{
// console.log("hjsdgjd: "+response.status );
response
})
.catch(this.errorHandler);
console.log("abc: " + abc);
return abc;
}
errorHandler(error: HttpErrorResponse){
console.log('some thing');
return Observable.throw(error.message);
}
}
这是我修改令牌时的console
【问题讨论】：
-
@SurjitSD：感谢您希望在这里改进问题。但是，没有印刷原因将 Laravel 和 Angular 等软件名称包装为粗体或斜体。它们是专有名词，因此只需修正大小写，否则请按原样保留它们。过多的格式使事情更难阅读，而不是更容易。
标签： angular authentication error-handling angular5 auth-guard