Hybrid ionic mobile app: hide login screen after successful login

ionic-v1
1

I am developing mobile app with ionic framework.it has a side menu with following links

1.Home

1.Login

2.About

3.Settings

When user is logged in i want to change the login in side menu to myprofile link

In the login controller

.controller('LoginCtrl',function($scope,$http,$ionicPopup,$state){
   $scope.login=function(user){
      //http call for login api 
      //set the auth token
      window.localStorage.setItem('usertoken',response.token);
      $state.go('app.profile');
     }
}})

In Menu controller

.controller('MenuCtrl', function($scope, $ionicModal, $timeout) {

  //shows the login link when the user is not logged in othewise show profile.
  if(window.localStorage.getItem('usertoken')==null){
       $scope.showloginlink=true;
       $scope.showprofilelink=false;
  }else{
      $scope.showloginlink=false;
      $scope.showprofilelink=true;
  }
  
});

Here is htmll

<ion-list >
        <ion-item menu-close href="#/app/login" ng-show="showloginlink">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/profile" ng-show="showprofilelink">
          Profile
        </ion-item>

The problem it dosen’t show the profile link after login,but when i refresh the entire page it will works as i expected
How to solve this problem?

UPDATE

I have solved the problem via reload the state

$state.go('app.profile',null,{reload: true});

But i wil get another error,side menu is missing from my user_profilepage
I’ve added this enable-menu-with-back-views="true" in menu.html ,but still i have the menu missing problem:(

Note:I am using ionic tabs template

2

This is not a relevant answer but might help you if you have issue like even after logged in navigating back to the login page when back button is pressed.
Using the below code before $state.go(‘app.profile’) will let you not to navigate back to the login page when back button is clicked after you are logged in.

$ionicHistory.nextViewOptions({
disableBack: true
});

I will try to look into what you have posted and will post the answer if I find a solution.

3

Problem is that the menuctrl is executed before you are loggedin.

Use angular events ($scope.$broadcast or $scope.$emit) to inform parent, child controllers that something changed. Or share the state through a service.

so if you are logged in:

$scope.login=function(user){
    //http call for login api 
    //set the auth token
    window.localStorage.setItem('usertoken',response.token);
    // broadcast that you are logged in through the whole app
    $rootScope.$broadcast('loggedIn');
    $state.go('app.profile');
}
1 Like