在Angular 5中,可以使用基本身份验证的HTTP拦截器来处理身份验证。下面是一个解决方法,包含代码示例:
auth.interceptor.ts
的文件,并在其中定义一个HTTP拦截器,用于添加身份验证头部。import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// 获取存储在本地的身份验证令牌
const token = localStorage.getItem('token');
if (token) {
// 将身份验证令牌添加到请求头部
const cloned = request.clone({
headers: request.headers.set('Authorization', 'Bearer ' + token)
});
return next.handle(cloned);
} else {
return next.handle(request);
}
}
}
app.module.ts
文件中,将AuthInterceptor
添加到提供商列表中,并将其添加到HTTP拦截器中。import { AuthInterceptor } from './auth.interceptor';
@NgModule({
...
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],
...
})
export class AppModule { }
import { HttpClient } from '@angular/common/http';
export class AuthService {
constructor(private http: HttpClient) { }
login(username: string, password: string) {
return this.http.post('/api/login', { username: username, password: password })
.subscribe(response => {
// 登录成功后保存身份验证令牌
localStorage.setItem('token', response.token);
// redirect to home page
});
}
}
在这个解决方法中,我们使用AuthInterceptor
拦截器来检查是否存在身份验证令牌。如果存在,它将在请求头部中添加Authorization
头部,并将令牌作为Bearer令牌发送到服务器。
请注意,这只是一个基本示例,你可能需要根据你的身份验证实现进行适当的更改。