Handling state reset on logout

In AngularJS applications, resetting the application state on logout is important to ensure that no sensitive user data persists after the user logs out. This involves:

1. Clearing local application state (from $scope or services).
2. Removing stored data in localStorage or sessionStorage.
3. Redirecting the user to the login page or another appropriate screen.

---

Approach 1: Resetting $scope Variables

If your application stores user data in $scope, you can reset it when the user logs out.

Example: Resetting $scope State in Controller

app.controller('UserController', function($scope) {
    // Initial state
    $scope.user = {
        name: '',
        email: '',
        isAuthenticated: false
    };

    // Function to log in (Mock example)
    $scope.login = function() {
        $scope.user = {
            name: 'John Doe',
            email: 'john@example.com',
            isAuthenticated: true
        };
    };

    // Logout function to reset state
    $scope.logout = function() {
        $scope.user = {
            name: '',
            email: '',
            isAuthenticated: false
        };
    };
});

What happens?

• When the logout() function is called, it resets the user object.
• This ensures that the UI updates and no old user data remains in memory.

---

Approach 2: Clearing localStorage on Logout

If user data is stored in localStorage, it must be cleared when logging out.

Example: Using a Service to Handle Storage

app.factory('AuthService', function() {
    var userKey = 'user_data';

    return {
        getUser: function() {
            var user = localStorage.getItem(userKey);
            return user ? JSON.parse(user) : null;
        },
        setUser: function(user) {
            localStorage.setItem(userKey, JSON.stringify(user));
        },
        logout: function() {
            localStorage.removeItem(userKey);
        }
    };
});

Example: Using the Service in a Controller

app.controller('AuthController', function($scope, AuthService, $window) {
    $scope.user = AuthService.getUser() || { name: '', email: '' };

    $scope.login = function() {
        var userData = { name: 'John Doe', email: 'john@example.com' };
        AuthService.setUser(userData);
        $scope.user = userData;
    };

    $scope.logout = function() {
        AuthService.logout();
        $scope.user = { name: '', email: '' };
        $window.location.href = 'login.html'; // Redirect to login page
    };
});

What happens?

• Before logout: User data is stored in localStorage and used across the app.
• On logout: localStorage.removeItem('user_data') clears saved data, and the app redirects to the login page.

---

Approach 3: Resetting State in AngularJS Services

If your application shares state between components using a service, resetting the state in the service ensures that all components reflect the change.

Example: Shared State Service

app.factory('UserService', function() {
    var user = { name: '', email: '', isAuthenticated: false };

    return {
        getUser: function() {
            return user;
        },
        setUser: function(newUser) {
            user = newUser;
        },
        resetUser: function() {
            user = { name: '', email: '', isAuthenticated: false };
        }
    };
});

Example: Using the Service in a Controller

app.controller('ProfileController', function($scope, UserService) {
    $scope.user = UserService.getUser();

    $scope.logout = function() {
        UserService.resetUser();
    };
});

What happens?

• Calling UserService.resetUser() resets the user state.
• Any other component using UserService.getUser() will also see the updated state.

---

Approach 4: Using $rootScope for Global Reset

If multiple controllers use $rootScope, clearing it on logout ensures a global state reset.

Example: Resetting $rootScope

app.controller('MainController', function($rootScope, $scope) {
    // Set user details on login
    $scope.login = function() {
        $rootScope.user = { name: 'John Doe', email: 'john@example.com' };
    };

    // Reset on logout
    $scope.logout = function() {
        $rootScope.user = {};
    };
});

What happens?

• Before logout: $rootScope.user is available globally.
• On logout: $rootScope.user = {} resets the user globally.

---

Approach 5: Clearing Session Data (sessionStorage)

For temporary user data (which should clear when the tab is closed), use sessionStorage.

Example: Using sessionStorage in Logout Function

$scope.logout = function() {
    sessionStorage.clear(); // Clears all session data
    $window.location.reload(); // Reload to reflect changes
};

What happens?

• sessionStorage.clear() removes all session-based data.
• $window.location.reload() forces the app to refresh with a clean state.

---

Approach 6: Redirecting to Login Page on Logout

If your app has a login page, you can redirect users to it on logout.

Example: Redirecting After Logout

$scope.logout = function() {
    localStorage.clear(); // Clear all stored data
    window.location.href = 'login.html'; // Redirect to login page
};

What happens?

• localStorage.clear() removes all saved data.
• window.location.href navigates the user to the login page