AngularJS+SpringBoot登录后获取用户信息并跳转页面问题

嘿，你已经把认证的基础功能搭好了，接下来只要把后端返回的用户信息利用起来，就能实现登录后跳转到用户车辆页面啦！我帮你梳理一下具体的修改步骤：

1. 调整后端接口，返回包含userId的用户信息 #

你当前的AuthenticationController只返回了Principal，但这个对象通常只包含用户名，没有直接的userId。我们可以修改接口，返回包含userId的自定义数据结构：

@RestController
public class AuthenticationController {

    // 假设你有一个UserService用来根据用户名查询用户ID
    @Autowired
    private UserService userService;

    @RequestMapping("/user-login")
    @ResponseBody
    public Map<String, Object> login(Principal principal) {
        // 从SecurityContext获取当前登录的用户详情
        UserDetails userDetails = (UserDetails) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
        // 根据用户名查询用户ID（这里替换成你实际的查询逻辑）
        Long userId = userService.getUserIdByUsername(userDetails.getUsername());
        
        // 组装要返回的用户信息
        Map<String, Object> userInfo = new HashMap<>();
        userInfo.put("userId", userId);
        userInfo.put("username", userDetails.getUsername());
        
        return userInfo;
    }

    // 额外加一个接口，供前端在页面刷新时获取当前用户信息（可选但推荐）
    @RequestMapping("/current-user")
    @ResponseBody
    public Map<String, Object> getCurrentUser(Principal principal) {
        return login(principal); // 复用上面的逻辑即可
    }
}

2. 改造前端认证服务，存储用户信息 #

修改AuthenticationService，在登录成功后把后端返回的用户信息保存下来，方便后续页面使用：

angular.module('app')
 .constant('LOGIN_ENDPOINT', '/user-login')
 .constant('LOGOUT_ENDPOINT', '/user-logout')
 .service('AuthenticationService', function($http, LOGIN_ENDPOINT, LOGOUT_ENDPOINT) {
 // 用这个变量存储当前登录用户的信息
 this.currentUser = null;

 this.authenticate = function(credentials, successCallback) {
 var authHeader = {Authorization: 'Basic ' + btoa(credentials.email+':'+credentials.password)};
 var config = {headers: authHeader};
 $http
 .post(LOGIN_ENDPOINT, { }, config)
 .then(function success(res) {
 $http.defaults.headers.post.Authorization = authHeader.Authorization;
 // 把后端返回的用户信息存到service里
 this.currentUser = res.data;
 // 调用回调时把用户信息传过去
 successCallback(res.data);
 }.bind(this), function error(reason) {
 console.log('Login error');
 console.log(reason);
 });
 }

 this.logout = function(successCallback) {
 delete $http.defaults.headers.post.Authorization;
 // 登出时清空用户信息
 this.currentUser = null;
 successCallback();
 }
 });

3. 修改登录控制器，实现跳转逻辑 #

在AuthenticationController的登录成功回调里，拿到userId后直接跳转到/user-cars/:userId页面：

angular.module('app')
 .controller('AuthenticationController', function($rootScope, $location, AuthenticationService) {
 var vm = this;
 vm.credentials = {};

 var loginSuccess = function(userInfo) {
 $rootScope.authenticated = true;
 // 把用户信息同步到rootScope，方便其他组件直接使用（可选）
 $rootScope.currentUser = userInfo;
 // 跳转到用户车辆页面，拼接userId参数
 $location.path('/user-cars/' + userInfo.userId);
 }

 vm.login = function() {
 AuthenticationService.authenticate(vm.credentials, loginSuccess);
 }

 var logoutSuccess = function() {
 $rootScope.authenticated = false;
 $rootScope.currentUser = null;
 $location.path('/');
 }

 vm.logout = function() {
 AuthenticationService.logout(logoutSuccess);
 }
 })

4. 处理页面刷新的情况（可选） #

如果用户刷新页面，之前存在内存里的用户信息会丢失，我们可以在应用启动时自动获取当前用户信息：

angular.module('app').run(function($rootScope, $http, AuthenticationService) {
    // 页面加载时尝试获取当前用户信息
    $http.get('/current-user')
        .then(function(res) {
            $rootScope.authenticated = true;
            $rootScope.currentUser = res.data;
            AuthenticationService.currentUser = res.data;
        })
        .catch(function() {
            // 如果获取失败，说明用户未登录
            $rootScope.authenticated = false;
        });
});

这样改造之后，用户登录成功就会自动跳转到对应的车辆页面，而且页面刷新后用户信息也能保留~

内容的提问来源于stack exchange，提问作者Piotron