Angular2 Spring Boot JWT缺少响应头
Angular2 Spring Boot JWT缺少响应头
提问于 2017-01-11 18:49:08
我使用Angular2、Angular-cli、Spring Boot1.4.0和jwt。当我登录我的Angular2客户端时，我无法获得JWT令牌。
我的安全配置是：
@Configuration
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable() // disable csrf for our requests.
.authorizeRequests()
.antMatchers("/").permitAll()
.antMatchers("/api/user/signup").permitAll()
.antMatchers(HttpMethod.POST, "/api/user/login").permitAll()
.anyRequest().authenticated()
.and()
// We filter the api/login requests
.addFilterBefore(new JWTLoginFilter("/api/user/login", authenticationManager()), UsernamePasswordAuthenticationFilter.class)
// And filter other requests to check the presence of JWT in header
.addFilterBefore(new JWTAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
.permitAll().and().csrf().disable();
}
}我的TokenAuthenticationService是：
public class TokenAuthenticationService {
private final long EXPIRATIONTIME = 1000 * 60 * 60 * 24 * 10; // 10 days
private final String secret = "ThisIsASecret";
private final String tokenPrefix = "Bearer";
private final String headerString = "Authorization";
public void addAuthentication(HttpServletResponse response, String username)
{
// We generate a token now.
String JWT = Jwts.builder()
.setSubject(username)
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATIONTIME))
.signWith(SignatureAlgorithm.HS512, secret)
.compact();
response.addHeader("Access-Control-Allow-Origin", "*");
response.setHeader(headerString, tokenPrefix + " "+ JWT);
response.getHeaderNames().stream()
.forEach(System.out::println);
}
}当我向邮递员发送登录请求时，我收到的响应如下：
但我发送登录请求我的Angular2应用程序，我不能收到名为“授权”自定义标题的响应头。我的响应对象是这样的：
但是当我查看浏览器控制台时，我看到了我的浏览器标题"Authorization“。
我的Angular2代码是：
@Injectable()
export class LoginService {
private authEvents: Subject<AuthEvent>;
private cred: AccountCredentials;
constructor(private http: JsonHttpService ){
this.authEvents = new Subject<AuthEvent>();
this.cred = new AccountCredentials();
}
login(email: string, password: string) {
this.cred.password = password;
this.cred.username = email;
return this.http.post('http://localhost:9090/api/user/login', this.cred)
.do((resp: Response) => {
localStorage.setItem('jwt', resp.headers.get('Authorization'));
this.authEvents.next(new DidLogin());
});
}
logout(): void {
localStorage.removeItem('jwt');
this.authEvents.next(new DidLogout());
}
isSignedIn(): boolean {
return localStorage.getItem('jwt') !== null;
}
}
export class DidLogin {
}
export class DidLogout {
}
export type AuthEvent = DidLogin | DidLogout;我的JsonHttpService是：
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {
Http,
RequestOptionsArgs,
RequestOptions,
Response,
Headers
} from '@angular/http';
const mergeAuthToken = (options: RequestOptionsArgs = {}) => {
let newOptions = new RequestOptions({}).merge(options);
let newHeaders = new Headers(newOptions.headers);
const jwt = localStorage.getItem('jwt');
if (jwt && jwt !== 'null') {
newHeaders.set('Authorization', jwt);
}
newHeaders.set('content-type', 'application/x-www-form-urlencoded; charset=utf-8');
// newHeaders.set('Access-Control-Allow-Origin', '*');
newOptions.headers = newHeaders;
return newOptions;
};
@Injectable()
export class JsonHttpService {
constructor(private http: Http) { }
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.http.get(url, mergeAuthToken(options));
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
return this.http.post(url, body, mergeAuthToken(options));
}
put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
return this.http.put(url, body, mergeAuthToken(options));
}
delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.http.delete(url, mergeAuthToken(options));
}
patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
return this.http.patch(url, body, mergeAuthToken(options));
}
head(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.http.head(url, mergeAuthToken(options));
}
}那么为什么我不能收到我的jwt令牌并添加我的浏览器localStorage？
回答 4
Stack Overflow用户
发布于 2017-01-17 01:20:10
默认情况下，浏览器不会向应用程序公开自定义标头。
您需要在后端Cors配置中使用以下标头
'Access-Control-Expose-Headers' 'Authorization';请注意，即使头文件存在于开发控制台中，如果服务器应用程序未公开它们，则应用程序也无法读取它们。
Stack Overflow用户
发布于 2017-01-17 01:12:03
您是否在不同的端口上运行您的Angular2应用程序和springboot？如果是这样，你在你的springboot应用程序中启用CORS了吗？
将withCredentials: true添加到您的Angualr2帖子标题
this.http.post('http://localhost:9090/api/user/login',
{ withCredentials: true },
this.cred)有关使用Angular的更多springboot JWT，请查看Springboot JWT Starter
Stack Overflow用户
发布于 2017-05-02 17:04:14
解决问题的最好方法是在您的应用程序中添加cors配置，如https://spring.io/blog/2015/06/08/cors-support-in-spring-framework所述。您也可以执行以下操作：
@Configuration
public class RestConfigs {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addExposedHeader(MyUtils.AUTHENTICATION); //Header String
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("GET");
config.addAllowedMethod("POST");
config.addAllowedMethod("PUT");
config.addAllowedMethod("DELETE");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41588827
复制相关文章
相似问题
腾讯云开发者
