angular.js - Cara memaparkan data pengguna dengan betul dalam pengepala selepas log masuk sudut selesai

Question

Seperti yang ditunjukkan dalam gambar: kotak merah di sudut kanan atas adalah lokasi di mana nama pengguna dipaparkan selepas berjaya log masuk

Saya kini melakukannya melalui penghantaran acara sudut. Setiap kali halaman dimuat semula secara manual, data pengguna tidak boleh diambil semula. Cara manakah ini harus dilakukan dengan lebih baik? Tolong beri saya nasihat!

LoginController: Pengawal paparan log masuk

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: Pengawal rangka kerja sistem, termasuk pengepala

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