AngularJS Authentication (Login, Logout, Auth Guard)

अब हम सीखते हैं AngularJS Tutorial का एक ऐसा चैप्टर जो किसी भी real-world app के लिए बहुत जरूरी है:

🔐 AngularJS Authentication (Login, Logout, Auth Guard)

(User को Login करवाना, Session Manage करना, और Route को Protect करना)

---

📌 Authentication क्या है?

Authentication का मतलब होता है:

यूज़र को verify करना कि वह कौन है — और उसके आधार पर ही उसे app में login करने, logout करने या protected areas access करने देना।

AngularJS में authentication का implementation पूरी तरह client-side होता है, लेकिन आप इसे server के साथ integrate करके real login system बना सकते हैं।

---

🎯 इस चैप्टर में हम क्या सीखेंगे?

1. Simple Login Form बनाना
2. Login होने के बाद User को Session में Store करना (localStorage)
3. Logout करना
4. Route को Authenticated User के लिए ही Accessible बनाना (Auth Guard)

---

✅ Step 1: AngularJS App Setup

var app = angular.module("authApp", ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when("/login", {
      templateUrl: "login.html",
      controller: "LoginCtrl"
    })
    .when("/dashboard", {
      templateUrl: "dashboard.html",
      controller: "DashboardCtrl",
      resolve: {
        auth: function($location, AuthService) {
          if (!AuthService.isLoggedIn()) {
            $location.path("/login");
          }
        }
      }
    })
    .otherwise({ redirectTo: "/login" });
});

---

✅ Step 2: AuthService

app.factory("AuthService", function($window) {
  var userKey = "loggedInUser";

  return {
    login: function(username, password) {
      if (username === "admin" && password === "1234") {
        $window.localStorage.setItem(userKey, username);
        return true;
      }
      return false;
    },
    logout: function() {
      $window.localStorage.removeItem(userKey);
    },
    isLoggedIn: function() {
      return !!$window.localStorage.getItem(userKey);
    },
    getUser: function() {
      return $window.localStorage.getItem(userKey);
    }
  };
});

---

✅ Step 3: Login Controller

app.controller("LoginCtrl", function($scope, $location, AuthService) {
  $scope.username = "";
  $scope.password = "";
  $scope.error = "";

  $scope.login = function() {
    if (AuthService.login($scope.username, $scope.password)) {
      $location.path("/dashboard");
    } else {
      $scope.error = "Invalid credentials";
    }
  };
});

📄 login.html

<div class="w3-container w3-card w3-padding">
  <h3>Login</h3>
  <input type="text" ng-model="username" placeholder="Username" class="w3-input w3-margin-bottom" />
  <input type="password" ng-model="password" placeholder="Password" class="w3-input w3-margin-bottom" />
  <button ng-click="login()" class="w3-button w3-green">Login</button>
  <p class="w3-text-red">{{ error }}</p>
</div>

---

✅ Step 4: Dashboard Controller & Logout

app.controller("DashboardCtrl", function($scope, AuthService, $location) {
  $scope.user = AuthService.getUser();

  $scope.logout = function() {
    AuthService.logout();
    $location.path("/login");
  };
});

📄 dashboard.html

<div class="w3-container w3-card w3-padding">
  <h3>Welcome, {{ user }}</h3>
  <button ng-click="logout()" class="w3-button w3-red">Logout</button>
</div>

---

🔐 Step 5: Auth Guard with $routeProvider.resolve

resolve: {
  auth: function($location, AuthService) {
    if (!AuthService.isLoggedIn()) {
      $location.path("/login");
    }
  }
}

इसका मतलब है: अगर user login नहीं है, तो उसे /dashboard जाने नहीं दिया जाएगा।

---

⚙️ Bonus: UI Hide/Show Based on Login

<div ng-show="AuthService.isLoggedIn()">
  <a href="#!/dashboard">Dashboard</a>
  <button ng-click="logout()">Logout</button>
</div>
<div ng-hide="AuthService.isLoggedIn()">
  <a href="#!/login">Login</a>
</div>

---

⚠️ ध्यान रखने योग्य बातें:

• ये पूरी authentication client-side simulated है
• Real login में API call से token/session आता है
• Sensitive data कभी localStorage में plaintext में न रखें
• Production के लिए JWT, session cookie, token refresh आदि चाहिए

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में route को authenticated user के लिए कैसे restrict करते हैं?
2. AuthService में कौन-से methods जरूरी होते हैं?
3. Real-world login में client-side storage से क्या खतरे हो सकते हैं?

---

✅ आपने क्या सीखा?

• Simple login/logout system बनाना
• User को localStorage में store करना
• Auth Guard के ज़रिए route protection
• UI में logged-in state के हिसाब से visibility
• AngularJS SPA को secure look देना

---

🎯 अब आप AngularJS apps में basic authentication system बना सकते हैं — जिससे आपका App बनेगा ज़्यादा usable और professional।