Guide to logging out from a website using AngularJS

Question

Guide to logging out from a website using AngularJS

I have developed a login page using AngularJS, where I input static username and password. Upon submitting the form, it redirects to a welcome screen. Now, I am looking to implement a logout feature that will transition from the welcome page back to the login page. How can this be achieved with AngularJS?

Below is the code snippet I have written:

.controller("loginController", function($scope, $location, $rootScope){
        $scope.login = function() {
            var user = $scope.username;
            var password = $scope.password;
            var result = $scope.username + $scope.password;
            
            if (user == "admin" && password == 'admin'){
                $rootScope.loggedIn = true;
                $location.path('/welcome');
            } else {
                alert("INVALID CREDENTIALS");
            }
        }

    .controller('welcomeController', function($scope){
        $scope.message = "Welcome here"
    })

javascript angularjs

Answer 1

Answer №1

Follow the instructions provided by Sajeetharan in a previous response.
Simply clear the values of $scope.username and $scope.password within the logout function.

Create a function that will redirect your page to the home page and include the following code:

.controller('logoutController', function($scope,$location){
  $scope.logout = function(){
      //Clear values from scope
      $scope.username = '';
      $scope.password = '';
      $location.path('/home');
  }
})

Then, call this function using ng-click

<button ng-click="logout()">
  Logout
</button>

By the way, the method you are currently using may not be ideal.

Answer 2

Follow the instructions provided by Sajeetharan in a previous response.
Simply clear the values of $scope.username and $scope.password within the logout function.

Create a function that will redirect your page to the home page and include the following code:

.controller('logoutController', function($scope,$location){
  $scope.logout = function(){
      //Clear values from scope
      $scope.username = '';
      $scope.password = '';
      $location.path('/home');
  }
})

Then, call this function using ng-click

<button ng-click="logout()">
  Logout
</button>

By the way, the method you are currently using may not be ideal.

Answer 3

Answer №2

To create a function that redirects your page to the home page, follow these steps:

.controller('redirectController', function($scope,$location){
  $scope.redirectToHomePage = function(){
      $location.path('/home');
  }
})

Next, use ng-click to call this function:

<button ng-click="redirectToHomePage()">
  Go to Home
</button>

Answer 4

To create a function that redirects your page to the home page, follow these steps:

.controller('redirectController', function($scope,$location){
  $scope.redirectToHomePage = function(){
      $location.path('/home');
  }
})

Next, use ng-click to call this function:

<button ng-click="redirectToHomePage()">
  Go to Home
</button>

Guide to logging out from a website using AngularJS

Answer №1

Answer №2

Similar questions

JavaScript did not apply the style as expected. However, the console displays the information

Utilize Services without creating circular interdependencies

The data in AngularJS ng-repeat does not appear accurately

Executing a for-in loop that iterates through MongoDB operations

Blend the power of Node's CommonJS with the versatility of Typescript's ES modules

Content in the <core-animation-pages> element is extending beyond the borders of the main DIV when the "slide-from-right" effect is applied (Polymer

I'm looking for the documentation for the latest version of Footable's Events. Can you point me

Angular and Laravel API combination for creating a straightforward single page application

Is there a way to access a random element from an array upon pressing a button?

Inject JSON result into an HTML div after an AJAX request

Unable to display script in the sources tab on NW.js 16

What are some solutions for resolving conflicts between map zoom and page zoom on a mobile website?

Adding a new document to MongoDB using the command line interface

Deprecated message received from the body-parser node module

My loop encountered an 'Undefined' error while attempting to retrieve an object from a JSON file

Subscriber client successfully activated and operational via the command line interface

Step-by-step guide on uploading an image file to a server via $http in Ionic Framework

Is there a way to disregard the data returned from previous AJAX calls?

Problem encountered when trying to show the Jquery Ajax response on an HTML page

Creating dynamic columns in AngularJS using ng-repeat