CODEWITHSUNDEEP
javascriptangularjs
Kode
Kode

Reputation: 3215

angularjs ng-show/ng-hide to display content once user is logged in

I am using Auth0 which allows me to retrieve user profile information once the login completes as follows: 

<span>Name is {{auth.profile.nickname}}</span>

// UserInfoCtrl.js
function UserInfoCtrl($scope, auth) {
  $scope.auth = auth;
}

What I want to do is use ng-show and ng-hide to only show content once a user is logged in. How have others achieved this? I was envisioning something like a conditional statement within my UserInfoCtrl.js such as:

if($scope.auth !== null) {
  $scope.loggedin
}

UPDATE: Per the comment about falselys and that $scope.auth provides some value, perhaps it is better to tie something to the Login controller. Any ideas?

// Login and logout functionality
pfcControllers.controller('loginCtrl', ['$scope', 'auth', '$location', 'store', function ($scope, auth, $location, store) {
$scope.login = function () {
    auth.signin({}, function (profile, token) {
        store.set('profile', profile);
        store.set('token', token);
        $location.path("/");
    }, function (error) {
        console.log("There was an error logging in", error);
    });
}

$scope.logout = function () {
    auth.signout();
    store.remove('profile');
    store.remove('token');
    $location.path('/login');
}
}]);

Upvotes: 2

Views: 7640

Answers (3)

diogopontual
diogopontual

Reputation: 103

For security reasons, I think your server should send the content of the logged area only when the user is logged.

However if, for some reason, you want do this control on the logged area you have some alternatives:

  1. Use ng-show="auth" on your element. It will display or hide the element, according to the 'auth' value. The element is never removed from the DOM, the frameworky simply add or remove a css class;
  2. Use ng-if="auth" on your element. It will add or remove the element according to the auth value. The element is entirely removed if auth evaluates to false;

Both ng-show and ng-if receive an expression, the reference is here.

Try do:

  1. on your controller method create: $scope.loggedin = false;
  2. update $scope.loggedin value where it can be changed;
  3. on the html use ng-show="loggedin" or ng-if="loggedin";
  4. if the functions that changes the loggedin value was not called from angular (events...), try do $scope.$apply(function(){ .... }). See here

Upvotes: 4

JoMendez
JoMendez

Reputation: 884

The simplest way to do that is putting this in your view code:

<div ng-show='auth'></div>

Now, this is not the best practice, I would recommend you to use tokens, here is post about tokens in angular

note: this is not a valid JS syntax:

  if($scope.auth is not null {
     $scope.loggedin
  }

use this instead:

  if($scope.auth != null) {
    $scope.loggedin
 }

Upvotes: 1

Omri Aharon
Omri Aharon

Reputation: 17064

If $scope.auth has a value only when the user is logged in you could do:

<span ng-show="auth">Name is {{auth.profile.nickname}}</span>

That way, you'll only see the span if auth is defined.

Upvotes: 4

Related Questions