在Angular中使用令牌进行访问需要遵循以下步骤:
在服务端生成一个令牌,并将其发送给客户端。
在客户端存储该令牌,通常是将令牌存储在本地存储或cookie中。
在每个HTTP请求的请求头中添加该令牌,以便服务端可以验证请求。
以下是一个示例代码,说明如何在Angular中使用令牌访问API:
在app.module.ts中导入HttpClientModule:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [HttpClientModule],
...
})
export class AppModule { }
创建一个AuthService,并在此处处理令牌的管理:
@Injectable({
providedIn: 'root'
})
export class AuthService {
token: string;
constructor(private http: HttpClient, private router: Router) { }
login(username: string, password: string): Observable {
return this.http.post('/api/authenticate', { username: username, password: password })
.pipe(
map(response => {
const token = response.token;
if (token) {
this.token = token;
localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
return true;
} else {
return false;
}
})
);
}
logout(): void {
this.token = null;
localStorage.removeItem('currentUser');
this.router.navigate(['/login']);
}
}
创建一个Interceptor,每个请求都添加验证令牌:
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
if (this.authService.token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.authService.token}`
}
});
}
return next.handle(request);
}
}
在app.module.ts中,导入和提供拦截器:
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './auth/token.interceptor';
@NgModule({
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
],
...
})
export class AppModule { }