如何使用 JWT 和 x-www-form-urlencoded 以角度 2 访问 spring API

Posted 2023-02-27

【中文标题】如何使用 JWT 和 x-www-form-urlencoded 以角度 2 访问 spring API

【英文标题】：How to access spring API with JWT and x-www-form-urlencoded in angular 2

【发布时间】：2017-04-25 14:55:03

【问题描述】：

请有人帮我解决这个问题。我有弹簧控制器，它可以处理每个具有正确用户名和密码的发布请求。我想以角度 2 访问它。目前，如果我使用邮递员访问它，这工作正常，但我仍然无法通过角度 2 访问它。这是我的弹簧控制器：

    @RequestMapping(value = "/login", method = RequestMethod.POST)
   public ResponseEntity<Map<String, Object>> login(@RequestParam String user_name, @RequestParam String password)
           throws IOException 

       String token = null;
       User appUser = useri.findByUserName(user_name);
       Map<String, Object> tokenMap = new HashMap<String, Object>();
       if (appUser != null && appUser.getUser_password().equals(password)) 
           token = Jwts.builder().setSubject(user_name).claim("roles", appUser.getRoles()).setIssuedAt(new Date())
                   .signWith(SignatureAlgorithm.HS256, "secretkey").compact();
           tokenMap.put("token", token);
           tokenMap.put("user", appUser);
           return new ResponseEntity<Map<String, Object>>(tokenMap, HttpStatus.OK);
        else 
           tokenMap.put("token", null);
           return new ResponseEntity<Map<String, Object>>(tokenMap, HttpStatus.UNAUTHORIZED);
       
   

这是我的邮递员请求结果的打印屏幕：

image

我曾在 Angular 2 中尝试过这样的代码，但失败了：

login(username: string, password: string): Observable<boolean> 
    return this.http.post('http://localhost:8090/login', JSON.stringify( user_name: username, password: password ))
        .map((response: Response) => 
            // login successful if there's a jwt token in the response
            let token = response.json() && response.json().token;
            if (token) 
                // set token property
                this.token = token;

                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify( user_name: username, token: token ));

                // return true to indicate successful login
                return true;
             else 
                // return false to indicate failed login
                return false;
            
        );

request 似乎没有返回响应。 请给我解决方案，任何帮助都将受到高度尊重。

【参考方案1】：

从@angular/http 导入URLSearchParams

import  URLSearchParams  from '@angular/http';

并使用

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('user_name', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

【讨论】：

我不知道怎么做，但是当我在浏览器中运行它时，它说localhost:3000/node_modules/@angular/http/bundles/http.umd.js/… 404（未找到），我检查了那个路径，我找到了那个文件......

如果你能给我以下内容可能有助于解决这个问题。 Angular2的版本？构建系统？ Angular-Cli？

"@angular/common": "~2.2.1"，我想我的 Angular 版本是 2.2.1，我在 package.json 中得到了它。 “systemjs”：“0.19.40”，这不是cli版本

你的 SystemJS 配置是不是像下面的github.com/angular/quickstart/blob/…

您首先需要确保正确转发请求。在 webpack 中，这将是设置代理。我不知道 systemjs，因为它对 Angular2 imo 不是很好。