Question

这是我第一次在我的角度客户端中编写一个Interceptor。我在Google上关注了几篇文章，以添加HttpInteceptor。我打电话给网络api并获得了令牌。我用控制台日志记录验证了令牌已收到，并将其添加到我的本地存储中。这是我的角度服务代码：

loginUser(user) : Observable<boolean> {
      var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
  return  this.http
        .post('http://localhost:55009/api/login', user )
        .map((data: any) => {
          this.token = data.token.token;
            localStorage.setItem('userToken', data.token.token);
            this.errorMessage = data.token.error;
console.log('token ===> ' + data.token.token);
console.log('isTokenValid ===> ' + this.isTokenValid());

console.log('errorMessage ===> ' + this.errorMessage);


                  return this.isTokenValid();
                })
    //  .map((response:any) => response.json())
     .catch(this.handleError);
              }

当我单击其他路线/菜单时，我遍历了interceptor.ts中的代码。当代码调用localStorage.getItem和login.getToken但都返回空字符串时。我检查了在线示例教程，但在我的代码中没有发现任何不同之处：

export class AuthInterceptor implements HttpInterceptor {
 public userToken: string;

    constructor(private router: Router, public login: LoginService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

this.userToken =  this.login.getToken();

        if (req.headers.get('No-Auth') == "True")
            return next.handle(req.clone());

        if (localStorage.getItem('userToken') != null) {
            const clonedreq = req.clone({
                headers: req.headers.set("Authorization", "Bearer " + localStorage.getItem('userToken'))
            });
            return next.handle(clonedreq)
                .do(
                succ => { },
                err => {
                    if (err.status === 401)
                        this.router.navigateByUrl('/home');
                }
                );
        }
        else {
            this.router.navigateByUrl('/home');
        }
    }
}

Answer 1

这很奇怪。在角度服务中，我能够获取令牌并使用LocalStorage进行设置。但是，该组件LocalStorage返回null。我将LocalStorage.setItem从服务移至组件，现在可以在Chrome开发工具上看到该值。

Answer 2

您必须订阅http请求。

.map((response:any) => response.json())
.subscribe(res => console.log(res))

Answer 3

首先验证令牌仍在您的本地存储中。您可以通过以下方式在Chrome上执行此操作：

转到开发工具
单击“应用程序”标签
点击左侧导航栏中的“本地存储”
在“本地存储”下找到您的站点名称，然后单击

这将告诉您令牌是否仍存在于本地存储中。如果是，那么我建议您在拦截器代码中设置一个断点，以确认加载路由时它是否在正确运行。

Answer 4

在loginUser方法中尝试以下操作：

this.token = data;
localStorage.setItem('userToken', this.token.token);

相反：

this.token = data.token.token;
localStorage.setItem('userToken', data.token.token);

Angular Http拦截器无法通过localStorage获取用户令牌以添加到标头

4 个答案: