Angular2和后端身份验证

时间:2016-11-03 07:58:01

标签: angular

我是Angular2的新手。

我的后端服务器有" Spring Security"实现。 用户需要发送用户名&用于LDAP身份验证的密码

参考: Angular2 - set headers for every request

这就是我的尝试:

login(username:string,password:string) {
     let headers = new Headers();
     this.createAuthorizationHeader(headers,username,password);
    return this.http.get(this.url,headers).map(this.extractData)
                    .catch(this.handleError).subscribe(e=>console.log(e));
  }

private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }

createAuthorizationHeader(headers:Headers,username:string,password:string) {
   headers.append("Authorization", "Basic " + btoa(username + ":" + password));
   headers.append("x-requested-with", 'XMLHttpRequest'); 
  }

但我得到401,但我的凭据是正确的。当我使用Rest客户端尝试它们时,它可以正常工作。

enter image description here

我检查了服务器日志,请求到达那里,但遗憾的是没有太多信息。

当我在前端调试时,我会在请求被触发之前在Authorization标头中看到有效值(加密)。

更新

高效代码(Angular1):

在Angular1中,它实现如下:

function logIn(username, password, callback) {
            var token = "Basic " + btoa(username + ":" + password);
            authenticate(token, callback);
        }                                                                                                              function authenticate(token, callback) {
            if(token.indexOf('Basic') > -1) {
                var headers = {
                Authorization: token,
                    "x-requested-with": 'XMLHttpRequest'
                };
                var url = ConfigService.getConfig("backend").url;
                return this.$http({
                    method: "GET",
                    url: url + "login",
                    withCredentials: true,
                    headers: headers
                }).then(function (success) {
                    $log.debug("AuthService.successfully logged in.");
                    var user = success.data;
                    user.auth = headers.Authorization;
                    $http.defaults.headers.common.Authorization = user.auth;
                    setUserInfo(
                        user,
                        new Date().getDate() + expireTime);
                    callback(success);
                }, function (error) {
                    if(error.status === -1) {
                        ToastService.showError('There seems to be a CORS problem. Do you use the right server?', error);
                    } else {
                        ToastService.showError(error.statusText, error);
                        $log.error('credentials must be wrong.');
                    }
                    $log.error(error);
                });
            }
        }

我发现我的实现和生产代码之间没有任何区别。 请帮助解决这个问题。

由于

0 个答案:

没有答案