angulaire.js - Comment afficher correctement les données utilisateur dans l'en-tête une fois la connexion angulaire terminée

Question

Comme le montre l'image : la case rouge dans le coin supérieur droit est l'emplacement où le nom d'utilisateur est affiché après une connexion réussie

Je le fais maintenant via la livraison d'événements angulaires. Chaque fois que la page est actualisée manuellement, les données de l'utilisateur ne peuvent pas être récupérées. De quelle manière cela devrait-il être mieux fait ? S'il vous plaît, donnez-moi quelques conseils !

LoginController : contrôleur de vue de connexion

function LoginController($rootScope, $scope, $state, $window, AUTH_EVENTS, AuthService, ProfileService) {
    var vm = this;
    vm.login = login;
    
    function login() {

      var userInfo = {
        username: vm.username,
        password: vm.password
      };

      AuthService.login(userInfo).then(function () {
        ProfileService.fetchUserInfo().then(function (res) {
          $scope.$emit(AUTH_EVENTS.loginSuccess, res);
          $state.go('app.program.list');
        })
      })

    }

  }

AppCtrl : contrôleur de structure système, y compris l'en-tête

function AppCtrl($rootScope, $scope, $state, $translate,
                   $localStorage, $window, $document, $timeout,
                   cfpLoadingBar, AuthService, AUTH_EVENTS) {

    $rootScope.$on(AUTH_EVENTS.loginSuccess, function (e,data) {
      $rootScope.user = data.data;
    });
    
}）

Answer 1

angular.module("myApp",[])
        .run(function (AuthService) {
            AuthService.login();
        })