#java #reactjs #spring-boot #axios #jwt
Вопрос:
Я могу получить ответ JWT в postman, отображающий токен. Но он не поставляется с данными пользователя( Ролью), назначенными пользователю. Вот внутренние коды :
Класс пользователя
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private Long id;
private String firstName ;
private String lastName;
private String username;
private String password;
private String Gender;
private String phoneNumber;
private String email;
private String branch;
private Calendar createdDate;
@ManyToMany(fetch = FetchType.EAGER, cascade = CascadeType.ALL)
@JoinTable(
name = "users_roles",
joinColumns = @JoinColumn(name = "user_id"),
inverseJoinColumns = @JoinColumn(name = "role_id")
)
private Set<UserRole> userRole = new HashSet<>();
@Enumerated(EnumType.STRING)
private UserStatus status;
Пользовательский контроллер
public class UserController {
@Autowired
private AuthenticationManager authenticationManager;
@Autowired
private JwtTokenUtil jwtTokenUtil;
@Autowired
UserAccountService userAccountService;
@PostMapping(value="/validate")
public ResponseEntity<?> createAuthenticationToken(@RequestBody MyUserDetails authenticationRequest) throws Exception {
authenticate(authenticationRequest.getUsername(), authenticationRequest.getPassword());
final UserDetails userDetails = userAccountService.loadUserByUsername(authenticationRequest.getUsername());
final String token = jwtTokenUtil.generateToken(userDetails);
return ResponseEntity.ok(new JwtResponse(token));
}
private void authenticate(String username, String password) throws Exception {
try {
authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(username, password));
} catch (DisabledException e) {
throw new Exception("USER_DISABLED", e);
} catch (BadCredentialsException e) {
throw new Exception("INVALID_CREDENTIALS", e);
}
}
Это класс аутентификации переднего плана React
import "assets/css/style.css";
import axios from "axios";
const baseURL = "http://localhost:8080/validate";
export default class Auth extends React.Component {
handleSubmit = e => {
e.preventDefault();
const data = {
username: this.username,
password: this.password
}
axios.post(baseURL,data)
.then(res =>{
localStorage.setItem('token', res.data.jwt)
this.props.history.push('/admin/index')
})
.catch(err => {
console.log(err)
})
}
Это тот самый Admin.Js класс в react, к которому он должен перейти, если пользователь имеет роль администратора типа UserRole.
const Admin = (props) => {
const mainContent = React.useRef(null);
const location = useLocation();
React.useEffect(() => {
const config = {
headers:{
Authorization: 'Bearer ' localStorage.getItem('token')
}
}
axios.get('http://localhost:8080/list/User/',config).then(
res => {
console.log(res.data)
},
err => {
console.log(err)
}
)
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
mainContent.current.scrollTop = 0;
}, [location]);
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (prop.layout === "/admin") {
return (
<Route
path={prop.layout prop.path}
component={prop.component}
key={key}
/>
);
} else {
return null;
}
});
};
Комментарии:
1. добавьте информацию в полезную нагрузку, получите полезную нагрузку в интерфейсе и используйте эту информацию
2. Не могли бы вы, пожалуйста, добавить пример для этого ?
3. Вам следует прочитать немного больше о токенах JWT. В ходе быстрого исследования я нашел этот учебник, надеюсь, он поможет medium.com/@maison.moa/…