首页 > 解决方案 > JWT 如何获取分配给用户的用户角色以导航到相应的仪表板?

问题描述

我可以在显示令牌的邮递员中获得 JWT 响应。但它没有附带分配给用户的用户详细信息(角色)。这是后端代码:

用户类

@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 前端 Authentication 类

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类,如果用户是UserRole 类型 Admin,它应该导航到的位置。

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;
      }
    });
  };

标签: javareactjsspring-bootaxiosjwt

解决方案


推荐阅读