我需要帮助来处理我的角度应用程序中的过期令牌。我的 api 已过期,但我的问题是当我忘记注销我的角度应用程序时,一段时间后,我仍然可以访问主页但没有数据。我能做点什么吗?有没有可以处理这个问题的库?或者有什么我可以安装的吗?更好,如果我什么都不安装。下面是我的验证码?我可以添加任何可以处理过期的内容吗?如果过期,我将无法访问主页。
auth.service.ts
export class AuthService {
private loggedIn = false;
constructor(private httpClient: HttpClient) {
}
signinUser(email: string, password: string) {
const headers = new HttpHeaders()
.set('Content-Type', 'application/json');
return this.httpClient
.post(
'http://sample.com/login',
JSON.stringify({ email, password }),
{ headers: headers }
)
.map(
(response: any) => {
localStorage.setItem('auth_token', response.token);
this.loggedIn = true;
return response;
});
}
isLoggedIn() {
if (localStorage.getItem('auth_token')) {
return this.loggedIn = true;
}
}
logout() {
localStorage.removeItem('auth_token');
this.loggedIn = false;
}
}
authguard.ts
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authService: AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.authService.isLoggedIn()) {
// logged in so return true
return true;
}
else {
// not logged in so redirect to login page with the return url
this.router.navigate(['signin'])
return false;
}
}
}
您可以使用 http 拦截器来做到这一点。
intercept(req: HttpRequest<any>, next: HttpHandler) {
if(!localStorage.getItem('token'))
return next.handle(req);
// set headers
req = req.clone({
setHeaders: {
'token': localStorage.getItem('token')
}
})
return next.handle(req).do((event: HttpEvent<any>) => {
if(event instanceof HttpResponse){
// if the token is valid
}
}, (err: any) => {
// if the token has expired.
if(err instanceof HttpErrorResponse){
if(err.status === 401){
// this is where you can do anything like navigating
this.router.navigateByUrl('/login');
}
}
});
}
这是完整的解决方案 https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)