java - 在角度和 Spring 应用程序中,我的注销功能不起作用?
问题描述
在我的 Spring 会话中,我使用了 redis 服务器。现在我正在使用 Angular 7。
这里代码 1>nav-compo.ts 点击注销按钮后函数在这里直接调用 logout()
logout()
{
this.loginService.logout().subscribe(
res =>
{
location.reload();
},
err =>
{
console.log(err);
}
)
}
2>这里登录服务
import { MyAccountComponent } from './../components/my-account/my-account.component';
import { AppConst } from './../constants/app-const';
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
@Injectable()
export class LoginService {
private serverPath:string =AppConst.serverPath;
constructor(private http: HttpClient, private router:Router) { }
sendCredential(username: string, password: string) {
let url = this.serverPath+'/token';
let encodedCredentials = btoa(username+":"+password);
let basicHeader = "Basic "+encodedCredentials;
let headers = new HttpHeaders ({
'content-Type' : 'application/x-www-form-urlencoded',
'Authorization' : basicHeader
});
return this.http.get(url,{headers:headers});
}
checkSession(){
let url = this.serverPath+'/user/checkSession';
let headers = new HttpHeaders ({
'x-auth-token' : localStorage.getItem('xAuthToken')
});
console.log("Value of token at check Session ",localStorage.getItem('xAuthToken'));
return this.http.get(url,{responseType:'text'});
}
logout(){
let url = this.serverPath+'/user/logoutUser';
let headers = new HttpHeaders ({
'x-auth-token' : localStorage.getItem('xAuthToken')
});
return this.http.post(url,'',{responseType:'text'});
// return this.http.post(url,'',{headers:headers});
}
ngOnInit() {
//Called after the constructor, initializing input properties, and the first call to ngOnChanges.
//Add 'implements OnInit' to the class.
}
}
3>最后的后端部分(LoginResource)
package com.bookstore.resource;
import java.util.Collections;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class LoginResource {
@RequestMapping("/token")
public Map<String,String> token(HttpSession session,HttpServletRequest req){
System.out.println(req.getRemoteHost());
String remoteHost=req.getRemoteHost();
int port =req.getRemotePort();
System.out.println("This is remoteHost:Port Number"+remoteHost+":"+port);
System.out.println("This is GetRemoteAddr"+req.getRemoteAddr());
return Collections.singletonMap("token",session.getId());
}
@RequestMapping("/user/checkSession")
public ResponseEntity checkSession()
{
System.out.print(HttpStatus.OK);
return new ResponseEntity("Session Activated!",HttpStatus.OK);
}
@RequestMapping(value="/user/logoutUser",method=RequestMethod.POST)
public ResponseEntity logout()
{
SecurityContextHolder.clearContext();
System.out.println("louout");
return new ResponseEntity("Logout done",HttpStatus.OK);
}
}
4> 过滤器类
package com.bookstore.config;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
@Order(Ordered.HIGHEST_PRECEDENCE)
@Component
public class RequestFilter implements Filter{
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, x-auth-token");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
System.out.println("value of request "+request.getMethod());
if(!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
System.out.println("At if");
try {
chain.doFilter(req, res);
} catch (Exception e) {
e.printStackTrace();
}
} else {
System.out.println("Pre-fight");
response.setHeader("Access-Control-Allowed-Methods", "POST, GET, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "authorization, content-type, x-auth-token, " +
"access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with");
response.setStatus(HttpServletResponse.SC_OK);
}
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
单击注销按钮后,我的页面将重新加载,但注意发生。它将与上一页相同。
如果我把 {headers:headers} 作为回报归档了 loginservice.logout() 然后会出现错误
TypeError: Cannot read property 'length' of null at http.js:109 at Array.forEach (<anonymous>) at HttpHeaders.lazyInit (http.js:103) at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init
(http.js:167) 在 HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:236) 在 Observable._subscribe (http.js:1436) 在 Observable .push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43) 在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe ( Observable.js:29) 在 subscribeTo.js:21 在 subscribeToResult (subscribeToResult.js:11)
解决方案
你有这个注销代码:
SecurityContextHolder.clearContext();
我会期待这样的事情:
Authentication auth = SecurityContextHolder.getContext().getAuthentication();
if (auth != null){
new SecurityContextLogoutHandler().logout(request, response, auth);
}
只是要清楚,这不是路由问题或权限问题吗?您确实看到服务器端确实到达了“/user/logoutUser”RequestMapping?
推荐阅读
- jquery - woocommerce js 事件无法按预期工作
- python - 无法使用 Python Selenium fin_element_by_xpath 定位元素
- docker - CodeBuild Docker 缓存在每个复制命令上都失效
- arrays - 我使用数组编写递归函数时犯了什么错误?
- dart - 使用 dart:mirrors 调用顶级函数
- reactjs - 终端的 CRA 高级配置?
- javascript - Javascript - 按属性过滤和/或分组对象数组
- php - 发布功能无法在 php 中与 android 一起使用
- jenkins - 在 jenkins 上的 cypress 中执行下载时未创建下载文件夹
- reactjs - 从基本 ts 文件返回 jsx 的最简化方法?