如何使用Angular2访问请求头？

huangapple
go评论151阅读模式
英文:

How to access request header with Angular2?

问题

在我的Golang后端中，当成功进行Facebook的OAuth2请求后，我会将用户重定向到我的应用程序的仪表板，代码如下：

  1. w.Header().Set("Authorization", fmt.Sprintf("Bearer %s", tokenString))
  2. http.Redirect(w, r, "http://"+r.Host+"/dashboard?jwt="+tokenString, http.StatusFound)

然后，在仪表板初始化时，我会执行以下操作：

  1. import { Router, RouteParams } from 'angular2/router';
  2. import { JWTService } from 'path/to/JWTService';
  3. import { Location } from 'angular2/platform/common';
  5. params: RouteParams;
  7. constructor(private _router: Router, private _jwt: JWTService, private _params: RouteParams, private location: Location) {
  8.     this.params = _params;
  9. }
  11. consol() {
  12.     var redirect_url = encodeURIComponent("http://localhost:9000/api/facebook/");
  13.     var url = "https://www.facebook.com/dialog/oauth?client_id=xxxx&redirect_uri="+ redirect_url + "&response_type=code&scope=email+user_location+user_about_me";
  14.     window.location.href = url;
  15. }
  17. ngOnInit() {
  18.     this.token = '';
  19.     console.log(this.params);
  20.     if (this.params.params['jwt'] != null) {
  21.         console.log(this.params);
  22.         localStorage.setItem('jwt', this.params.params['jwt']);
  23.         this.location.replaceState('/dashboard');
  24.     }
  25.     this.Bouncer();
  26. }

我希望避免使我的URL变得混乱，即使只有几秒钟。我希望能够检查请求头，因为我也通过请求头发送JWT。

更新

原始请求是通过Angular2 Material按钮完成的：

  1. <div md-raised-button color="warn" (click)="consol()">Login to FACEBOOK</div>
英文:

ON my golang backend after a success oauth2 request for facebook I redirect whe user to my app's dashboard like so:

  1. w.Header().Set(&quot;Authorization&quot;, fmt.Sprintf(&quot;Bearer %s&quot;, tokenString))
  2. http.Redirect(w, r, &quot;http://&quot; + r.Host + &quot;/dashboard?jwt=&quot; + tokenString, http.StatusFound)

Then on the dashboard initialization I do somenthing like:

  1. params:RouteParams;
  4. constructor(private _router:Router, private _jwt:JWTService, private _params:RouteParams, private location:Location) {
  5. 	this.params = _params;
  8. }
  11. consol() {
  12. 	var redirect_url = encodeURIComponent(&quot;http://localhost:9000/api/facebook/&quot;);
  13. 	var url = &quot;https://www.facebook.com/dialog/oauth?client_id=xxxx&amp;redirect_uri=&quot;+ redirect_url + &quot;&amp;response_type=code&amp;scope=email+user_location+user_about_me&quot;
  14. 	window.location.href=url;
  15. }
  17. ngOnInit() {
  18. 	this.token = &#39;&#39;;
  19. 	console.log(this.params);
  20. 	if (this.params.params[&#39;jwt&#39;] != null) {
  21. 		console.log(this.params);
  22. 		localStorage.setItem(&#39;jwt&#39;, this.params.params[&#39;jwt&#39;]);
  23. 		this.location.replaceState(&#39;/dashboard&#39;)
  24. 	}
  25. 	this.Bouncer();
  26. }

I want to avoid making my url dirty, not even for a few seconds. I wish I could inspect the request headers, because I am sending the jwt through that as well.

Updated

The original request is done through a angular2-material button

  1.  &lt;div md-raised-button color=&quot;warn&quot; (click)=&quot;consol()&quot;&gt;Login to FACEBOOK&lt;/div&gt;

答案1

得分: 1

首先，我创建一个弹出窗口/标签。

  1. var url = "https://accounts.google.com/o/oauth2/auth?client_id="
  2.             + clientid + "&redirect_uri="
  3.             + redirect_url + "&response_type=code&scope="
  4.             + scope;
  5. window.open(url);

这将跳转到谷歌，并在返回途中命中我的服务器，使用重定向URL。在这个弹出窗口中提供以下脚本标签。实际上，它只是在创建此弹出窗口的窗口（在这种情况下是我的SPA）上运行一个命令，并将我的应用程序令牌作为参数传递，然后关闭它。

  1. w.Write([]byte(`
  2.     <script>
  3.         var token="` + token + `";
  4.         function CloseMySelf() {
  5.             try {
  6.                 window.opener.angularComponentRef.runThisFunctionFromOutside(token);
  7.             }
  8.             catch (err) {}
  9.             window.close();
  10.             return false;
  11.         }
  12.         CloseMySelf();
  13.     </script>
  14. `))

这是被调用的函数。这个方法需要像这个问题所示的那样被公开。

  1. runThisFunctionFromOutside(token) {
  2.     localStorage.setItem('jwt', token);
  3.     location.href = "../dashboard";
  4. }
英文:

First I create a pop up window/tab.

  1. 	var url = &quot;https://accounts.google.com/o/oauth2/auth?client_id=&quot;
  2. 					+ clientid + &quot;&amp;redirect_uri=&quot;
  3. 					+ redirect_url + &quot;&amp;response_type=code&amp;scope=&quot;
  4. 					+ scope;
  5. 	window.open(url);

This goes to google and hit my server on the way back,at the redirect url.
Which serves the script tag below inside this popup. It actually just run a command on the windows that created this popup , in this case my SPA, with my application token as a parameter and then closes it.

  1. w.Write([]byte(`
  2. 					&lt;script&gt;
  3. 						var token=&quot;` + token + `&quot;;
  4. 						function CloseMySelf() {
  5. 							try {
  6. 								window.opener.angularComponentRef.runThisFunctionFromOutside(token);
  7. 							}
  8. 							catch (err) {}
  9. 							window.close();
  10. 							return false;
  11. 						}
  12. 						CloseMySelf();
  13. 					&lt;/script&gt;
  15. 	`))

This is the function that it call. This method needs to be made public like this question shows.

  1. runThisFunctionFromOutside(token) {
  2. 	localStorage.setItem(&#39;jwt&#39;, token);
  3. 	location.href = &quot;../dashboard&quot;;
  4. }

huangapple
  • 本文由 发表于 2016年4月17日 01:17:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/36667233.html
  • angular
  • go
  • jwt
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定