AngularJS- प्रत्येक मार्ग और नियंत्रक में लॉगिन और प्रमाणीकरण


130

मेरे पास एक AngularJS एप्लिकेशन है जो तुर्क, ग्रंट और बोवर का उपयोग करके बनाई गई है।

मेरे पास एक लॉगिन पृष्ठ है जिसमें एक नियंत्रक है जो प्रमाणीकरण के लिए जांच करता है। अगर क्रेडेंशियल सही हैं तो मैं होम पेज पर फिर से आता हूं।

app.js

'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
    .when('/forgotPassword', {
        templateUrl: 'forgotpassword.html',
        controller: 'forgotController'
      })
   .when('/home', {
       templateUrl: 'views/home.html',
       controller: 'homeController'
    })
    .otherwise({
       redirectTo: '/login'
    });
//    $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

angular.module('myApp').factory("page", function($rootScope){
    var page={};
    var user={};
    page.setPage=function(title,bodyClass){
        $rootScope.pageTitle = title;
        $rootScope.bodylayout=bodyClass;
    };
    page.setUser=function(user){
        $rootScope.user=user;
    }
    return page;
});

LoginControler.js

'use strict';

angular.module('myApp').controller('LoginController', function($scope, $location, $window,page) {
    page.setPage("Login","login-layout");
    $scope.user = {};
    $scope.loginUser=function()
    {
        var username=$scope.user.name;
        var password=$scope.user.password;
        if(username=="admin" && password=="admin123")
        {
            page.setUser($scope.user);
            $location.path( "/home" );
        }
        else
        {
            $scope.message="Error";
            $scope.messagecolor="alert alert-danger";
        }
    }
});

होम पेज पर मेरे पास है

<span class="user-info">
    <small>Welcome,</small>
    {{user.name}}
</span>
<span class="logout"><a href="" ng-click="logoutUser()">Logout</a></span>

में loginController, मैं लॉगिन जानकारी की जांच करता हूं और यदि यह सफल होता है, तो मैं उपयोगकर्ता ऑब्जेक्ट को सेवा कारखाने में सेट करता हूं। मुझे नहीं पता कि यह सही है या नहीं।

मुझे क्या चाहिए, जब उपयोगकर्ता लॉग इन होता है, तो वह उपयोगकर्ता ऑब्जेक्ट में कुछ मूल्य निर्धारित करता है ताकि अन्य सभी पृष्ठों को वह मान मिल सके।

जब भी कोई मार्ग परिवर्तन होता है, तो नियंत्रक को यह जांचना चाहिए कि उपयोगकर्ता लॉग इन है या नहीं। यदि नहीं, तो उसे लॉगिन पृष्ठ पर फिर से आना चाहिए। इसके अलावा, यदि उपयोगकर्ता पहले से लॉग इन है और पेज पर वापस आ जाता है, तो उसे होम पेज पर जाना चाहिए। नियंत्रक को सभी मार्गों पर क्रेडेंशियल्स की जांच करनी चाहिए।

मैंने एनजी-कुकीज़ के बारे में सुना है, लेकिन मुझे नहीं पता कि उनका उपयोग कैसे किया जाए।

मेरे द्वारा देखे गए कई उदाहरण बहुत स्पष्ट नहीं थे और वे किसी प्रकार की पहुंच भूमिकाओं या कुछ का उपयोग करते हैं। मैं ऐसा नहीं चाहता। मुझे केवल एक लॉगिन फ़िल्टर चाहिए। क्या कोई मुझे कुछ विचार दे सकता है?

जवाबों:


180

मेरा समाधान 3 भागों में टूट जाता है: उपयोगकर्ता की स्थिति एक सेवा में संग्रहीत की जाती है, रन विधि में आप देखते हैं कि मार्ग कब बदलता है और आप जांचते हैं कि क्या उपयोगकर्ता अनुरोधित पृष्ठ तक पहुंचने की अनुमति देता है, आपके मुख्य नियंत्रक में आप देखते हैं उपयोगकर्ता की स्थिति बदल जाती है।

app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function (event) {

        if (!Auth.isLoggedIn()) {
            console.log('DENY');
            event.preventDefault();
            $location.path('/login');
        }
        else {
            console.log('ALLOW');
            $location.path('/home');
        }
    });
}]);

आपको एक सेवा बनानी चाहिए (मैं इसे नाम दूंगा Auth) जो उपयोगकर्ता ऑब्जेक्ट को संभाल लेगी और यह जानने की विधि होगी कि उपयोगकर्ता लॉग इन है या नहीं।

सेवा :

 .factory('Auth', function(){
var user;

return{
    setUser : function(aUser){
        user = aUser;
    },
    isLoggedIn : function(){
        return(user)? user : false;
    }
  }
})

अपने से app.run, आपको $routeChangeStartघटना को सुनना चाहिए । जब मार्ग बदल जाएगा, तो यह जांच करेगा कि क्या उपयोगकर्ता लॉग इन है ( isLoggedInविधि को इसे संभालना चाहिए)। यदि उपयोगकर्ता लॉग नहीं है, तो यह अनुरोधित मार्ग को लोड नहीं करेगा और यह उपयोगकर्ता को सही पृष्ठ (आपके मामले में लॉगिन) पर पुनर्निर्देशित करेगा।

loginControllerसंभाल लॉगिन करने के लिए अपने प्रवेश पृष्ठ में इस्तेमाल किया जाना चाहिए। यह सिर्फ Authसेवा के साथ हस्तक्षेप करना चाहिए और उपयोगकर्ता को लॉग इन या सेट के रूप में सेट करना चाहिए ।

लॉगिन कंट्रोलर :

.controller('loginCtrl', [ '$scope', 'Auth', function ($scope, Auth) {
  //submit
  $scope.login = function () {
    // Ask to the server, do your job and THEN set the user

    Auth.setUser(user); //Update the state of the user in the app
  };
}])

अपने मुख्य नियंत्रक से, आप सुन सकते हैं कि उपयोगकर्ता स्थिति बदल जाती है और पुनर्निर्देशन के साथ प्रतिक्रिया करता है।

.controller('mainCtrl', ['$scope', 'Auth', '$location', function ($scope, Auth, $location) {

  $scope.$watch(Auth.isLoggedIn, function (value, oldValue) {

    if(!value && oldValue) {
      console.log("Disconnect");
      $location.path('/login');
    }

    if(value) {
      console.log("Connect");
      //Do something when the user is connected
    }

  }, true);

1
LoginController उपयोगकर्ता को लॉगिन पृष्ठ से लॉगिन करने की अनुमति देगा। यह लॉगिन फॉर्म को संभाल लेगा। फ़ॉर्म को एक सबमिट विधि को कॉल करना होगा जो आपके लॉगिनकंट्रोलर का हिस्सा है। यह विधि अपडेट करेगी (यदि फ़ॉर्म सही है और उपयोगकर्ता को लॉग इन करना होगा) मेरे द्वारा वर्णित प्रामाणिक सेवा का उपयोग करने वाले उपयोगकर्ता की स्थिति।
गाब

2
एक जादू की तरह काम किया! प्रदान की गई सेवा के बजाय मैंने Ang0JS के साथ Auth0 का उपयोग किया ।
निकोस बैक्सेवनिस

34
क्या होगा अगर उपयोगकर्ता F5 और रीफ्रेश हिट करता है? फिर आपकी मेमोरी में ऑथोरिटी चली गई है।
गौई

4
बस अगर दूसरों को इस उदाहरण को चलाने में समस्या हो रही है: routeChangeStartकॉलबैक में आपको जांचना चाहिए कि क्या स्थान वास्तव में "/ लॉगिन" है और अनुमति दें:if ( $location.path() === "/login" ) return;
user2084865

1
यह मुझे अनंत लूप में मिलता है।
निपुन त्यागी

110

या की resolveविशेषता का उपयोग करते हुए यहां एक और संभावित समाधान $stateProviderहै $routeProvider। उदाहरण के साथ $stateProvider:

.config(["$stateProvider", function ($stateProvider) {

  $stateProvider

  .state("forbidden", {
    /* ... */
  })

  .state("signIn", {
    /* ... */
    resolve: {
      access: ["Access", function (Access) { return Access.isAnonymous(); }],
    }
  })

  .state("home", {
    /* ... */
    resolve: {
      access: ["Access", function (Access) { return Access.isAuthenticated(); }],
    }
  })

  .state("admin", {
    /* ... */
    resolve: {
      access: ["Access", function (Access) { return Access.hasRole("ROLE_ADMIN"); }],
    }
  });

}])

Access वर्तमान उपयोगकर्ता अधिकारों के आधार पर एक वादा को हल करता है या अस्वीकार करता है:

.factory("Access", ["$q", "UserProfile", function ($q, UserProfile) {

  var Access = {

    OK: 200,

    // "we don't know who you are, so we can't say if you're authorized to access
    // this resource or not yet, please sign in first"
    UNAUTHORIZED: 401,

    // "we know who you are, and your profile does not allow you to access this resource"
    FORBIDDEN: 403,

    hasRole: function (role) {
      return UserProfile.then(function (userProfile) {
        if (userProfile.$hasRole(role)) {
          return Access.OK;
        } else if (userProfile.$isAnonymous()) {
          return $q.reject(Access.UNAUTHORIZED);
        } else {
          return $q.reject(Access.FORBIDDEN);
        }
      });
    },

    hasAnyRole: function (roles) {
      return UserProfile.then(function (userProfile) {
        if (userProfile.$hasAnyRole(roles)) {
          return Access.OK;
        } else if (userProfile.$isAnonymous()) {
          return $q.reject(Access.UNAUTHORIZED);
        } else {
          return $q.reject(Access.FORBIDDEN);
        }
      });
    },

    isAnonymous: function () {
      return UserProfile.then(function (userProfile) {
        if (userProfile.$isAnonymous()) {
          return Access.OK;
        } else {
          return $q.reject(Access.FORBIDDEN);
        }
      });
    },

    isAuthenticated: function () {
      return UserProfile.then(function (userProfile) {
        if (userProfile.$isAuthenticated()) {
          return Access.OK;
        } else {
          return $q.reject(Access.UNAUTHORIZED);
        }
      });
    }

  };

  return Access;

}])

UserProfileप्रतियां वर्तमान उपयोगकर्ता गुण, और लागू करने $hasRole, $hasAnyRole, $isAnonymousऔर $isAuthenticatedतरीकों तर्क (प्लस एक $refreshविधि है, बाद में बताया):

.factory("UserProfile", ["Auth", function (Auth) {

  var userProfile = {};

  var clearUserProfile = function () {
    for (var prop in userProfile) {
      if (userProfile.hasOwnProperty(prop)) {
        delete userProfile[prop];
      }
    }
  };

  var fetchUserProfile = function () {
    return Auth.getProfile().then(function (response) {
      clearUserProfile();
      return angular.extend(userProfile, response.data, {

        $refresh: fetchUserProfile,

        $hasRole: function (role) {
          return userProfile.roles.indexOf(role) >= 0;
        },

        $hasAnyRole: function (roles) {
          return !!userProfile.roles.filter(function (role) {
            return roles.indexOf(role) >= 0;
          }).length;
        },

        $isAnonymous: function () {
          return userProfile.anonymous;
        },

        $isAuthenticated: function () {
          return !userProfile.anonymous;
        }

      });
    });
  };

  return fetchUserProfile();

}])

Auth उपयोगकर्ता के प्रोफ़ाइल को जानने के लिए सर्वर से अनुरोध करने का प्रभारी है, उदाहरण के लिए अनुरोध से जुड़ी एक्सेस टोकन से जुड़ा हुआ):

.service("Auth", ["$http", function ($http) {

  this.getProfile = function () {
    return $http.get("api/auth");
  };

}])

सर्वर से अनुरोध करते समय ऐसी JSON ऑब्जेक्ट को वापस करने की उम्मीद की जाती है GET api/auth:

{
  "name": "John Doe", // plus any other user information
  "roles": ["ROLE_ADMIN", "ROLE_USER"], // or any other role (or no role at all, i.e. an empty array)
  "anonymous": false // or true
}

अंत में, जब Accessकिसी वादे को अस्वीकार कर दिया जाता है, यदि उपयोग करने पर ui.router, $stateChangeErrorघटना को निकाल दिया जाएगा:

.run(["$rootScope", "Access", "$state", "$log", function ($rootScope, Access, $state, $log) {

  $rootScope.$on("$stateChangeError", function (event, toState, toParams, fromState, fromParams, error) {
    switch (error) {

    case Access.UNAUTHORIZED:
      $state.go("signIn");
      break;

    case Access.FORBIDDEN:
      $state.go("forbidden");
      break;

    default:
      $log.warn("$stateChangeError event catched");
      break;

    }
  });

}])

यदि उपयोग किया जाता है ngRoute, तो $routeChangeErrorघटना को निकाल दिया जाएगा:

.run(["$rootScope", "Access", "$location", "$log", function ($rootScope, Access, $location, $log) {

  $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
    switch (rejection) {

    case Access.UNAUTHORIZED:
      $location.path("/signin");
      break;

    case Access.FORBIDDEN:
      $location.path("/forbidden");
      break;

    default:
      $log.warn("$stateChangeError event catched");
      break;

    }
  });

}])

उपयोगकर्ता प्रोफ़ाइल को नियंत्रकों में भी एक्सेस किया जा सकता है:

.state("home", {
  /* ... */
  controller: "HomeController",
  resolve: {
    userProfile: "UserProfile"
  }
})

UserProfileफिर अनुरोध करते समय सर्वर द्वारा लौटाए गए गुण शामिल होते हैं GET api/auth:

.controller("HomeController", ["$scope", "userProfile", function ($scope, userProfile) {

  $scope.title = "Hello " + userProfile.name; // "Hello John Doe" in the example

}])

UserProfileजब उपयोगकर्ता साइन इन या आउट करता है, तो उसे रीफ़्रेश करने की आवश्यकता होती है, ताकि Accessनए उपयोगकर्ता प्रोफ़ाइल वाले मार्गों को संभाल सके। आप या तो पूरे पृष्ठ को फिर से लोड कर सकते हैं, या कॉल कर सकते हैं UserProfile.$refresh()। साइन इन करते समय उदाहरण:

.service("Auth", ["$http", function ($http) {

  /* ... */

  this.signIn = function (credentials) {
    return $http.post("api/auth", credentials).then(function (response) {
      // authentication succeeded, store the response access token somewhere (if any)
    });
  };

}])
.state("signIn", {
  /* ... */
  controller: "SignInController",
  resolve: {
    /* ... */
    userProfile: "UserProfile"
  }
})
.controller("SignInController", ["$scope", "$state", "Auth", "userProfile", function ($scope, $state, Auth, userProfile) {

  $scope.signIn = function () {
    Auth.signIn($scope.credentials).then(function () {
      // user successfully authenticated, refresh UserProfile
      return userProfile.$refresh();
    }).then(function () {
      // UserProfile is refreshed, redirect user somewhere
      $state.go("home");
    });
  };

}])

3
मुझे लगता है कि यह सबसे सरल और सबसे अधिक विस्तृत जवाब है
जोथम

2
@LeblancMeneses धन्यवाद :) इसे स्पष्ट करने के लिए: UNAUTHORIZED का अर्थ है "हम नहीं जानते कि आप कौन हैं, इसलिए हम यह नहीं कह सकते हैं कि क्या आप इस संसाधन का उपयोग करने के लिए अधिकृत हैं या नहीं, कृपया पहले साइन इन करें" , जबकि BBIDDEN इसका अर्थ है "हम जानते हैं कि आप कौन हैं और आपकी प्रोफ़ाइल आपको इस संसाधन तक पहुंचने की अनुमति नहीं देती है"
sp00m

1
अच्छा समाधान, सर्वर साइड पर स्प्रिंग प्रमाणीकरण के साथ संभावित फिट
जन पीटर

1
सबसे अच्छा समाधान कभी!
रेनन फ्रैंका

1
@jsbisht यह सब उस जगह पर निर्भर करता है जहां आप एक्सेस टोकन स्टोर करते हैं (अंतिम स्निपेट देखें)। यदि आप इसे केवल जेएस मेमोरी में स्टोर करते हैं, तो हाँ: F5 ऑर्टिकल जानकारी को हटा देगा। लेकिन अगर आप इसे लगातार स्टोरेज (जैसे कुकी / लोकलस्टोरेज / सेशनस्टोरेज) में स्टोर करते हैं, तो नहीं: F5 ऑर्टिकल जानकारी को नहीं हटाएगा (जब तक आप हर $ http अनुरोधों को टोकन संलग्न कर देते हैं, या कम से कम अनुरोधों को भेज दिया जाता है) बाकी / उपयोगकर्ता / प्रोफ़ाइल, चूंकि सर्वर को संलग्न टोकन से जुड़े उपयोगकर्ता की प्रोफ़ाइल वापस करने की उम्मीद है)। हालांकि कुकी भंडारण का उपयोग करते समय CSRF से सावधान रहें।
sp00m

21

व्यक्तिगत मार्गों के लिए कस्टम व्यवहार को परिभाषित करने का सबसे सरल तरीका काफी आसान होगा:

1) routes.js: requireAuthकिसी भी वांछित मार्ग के लिए एक नई संपत्ति (जैसे ) बनाएं

angular.module('yourApp').config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'templates/home.html',
            requireAuth: true // our custom property
        })
        .when('/login', {
            templateUrl: 'templates/login.html',
        })
        .otherwise({
            redirectTo: '/home'
        });
})

2) एक शीर्ष स्तरीय नियंत्रक में जो अंदर के तत्व से बाध्य नहीं है ng-view(कोणीय के साथ संघर्ष से बचने के लिए $routeProvider), जांचें newUrlकि requireAuthसंपत्ति है और उसके अनुसार कार्य करें

 angular.module('YourApp').controller('YourController', function ($scope, $location, session) {

     // intercept the route change event
     $scope.$on('$routeChangeStart', function (angularEvent, newUrl) {

         // check if the custom property exist
         if (newUrl.requireAuth && !session.user) {

             // user isn’t authenticated
             $location.path("/login");
         }
     });
 });

1
क्या हम एक जगह में सभी मार्गों के लिए 'requAuth: true' विशेषता निर्दिष्ट कर सकते हैं ?। क्योंकि मेरे परिदृश्य में उनका लॉगिन पेज नहीं है, लेकिन इसकी पुष्टि थर्ड पार्टी रेस्ट कॉल से होती है। इसलिए मैं एक जगह निर्दिष्ट करना चाहता था, और इसे भविष्य के अतिरिक्त मार्गों के लिए भी लागू करना चाहिए।
रघुवीर

1
मेरी जानकारी में नहीं। शायद आप हर उस मार्ग की जाँच कर सकते हैं जिसमें DON'T को एक विशेष संपत्ति में परिभाषित किया गया है routes.js
DotBot

1
महान और सरल उदाहरण। यह मेरी जरूरतों के लिए बहुत मददगार था।
एरर 505

6

मैंने कुछ महीने पहले एक पोस्ट लिखा था कि एंगुलर के साथ उपयोगकर्ता पंजीकरण और लॉगिन कार्यक्षमता कैसे सेट करें, आप इसे http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and पर देख सकते हैं -Login-Example.aspx

मैं $locationChangeStartजाँचता हूँ कि उपयोगकर्ता घटना में लॉग इन है या नहीं , यहाँ मेरा मुख्य ऐप है।

(function () {
    'use strict';
 
    angular
        .module('app', ['ngRoute', 'ngCookies'])
        .config(config)
        .run(run);
 
    config.$inject = ['$routeProvider', '$locationProvider'];
    function config($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                controller: 'HomeController',
                templateUrl: 'home/home.view.html',
                controllerAs: 'vm'
            })
 
            .when('/login', {
                controller: 'LoginController',
                templateUrl: 'login/login.view.html',
                controllerAs: 'vm'
            })
 
            .when('/register', {
                controller: 'RegisterController',
                templateUrl: 'register/register.view.html',
                controllerAs: 'vm'
            })
 
            .otherwise({ redirectTo: '/login' });
    }
 
    run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
    function run($rootScope, $location, $cookieStore, $http) {
        // keep user logged in after page refresh
        $rootScope.globals = $cookieStore.get('globals') || {};
        if ($rootScope.globals.currentUser) {
            $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
        }
 
        $rootScope.$on('$locationChangeStart', function (event, next, current) {
            // redirect to login page if not logged in and trying to access a restricted page
            var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
            var loggedIn = $rootScope.globals.currentUser;
            if (restrictedPage && !loggedIn) {
                $location.path('/login');
            }
        });
    }
 
})();

अच्छा लगा लिखो। मैंने इसे संदर्भ के लिए इस्तेमाल किया। शुक्रिया @ जसन।
वेंकट कोटरा

2

मुझे ऐसा लगता है कि यह तरीका सबसे आसान है, लेकिन शायद यह सिर्फ व्यक्तिगत पसंद है।

जब आप अपना लॉगिन मार्ग (और किसी भी अन्य अनाम मार्ग; पूर्व: / रजिस्टर, / लॉगआउट, / ताज़ा करें, आदि) निर्दिष्ट करते हैं, तो जोड़ें:

allowAnonymous: true

तो, कुछ इस तरह से:

$stateProvider.state('login', {
    url: '/login',
    allowAnonymous: true, //if you move this, don't forget to update
                          //variable path in the force-page check.
    views: {
        root: {
            templateUrl: "app/auth/login/login.html",
            controller: 'LoginCtrl'
        }
    }
    //Any other config
}

आपको कभी भी "allowAnonymous: false" निर्दिष्ट करने की आवश्यकता नहीं है, यदि मौजूद नहीं है, तो इसे चेक में गलत माना जाता है। एक ऐसे ऐप में, जहां अधिकांश URL प्रमाणीकृत हैं, यह कम काम है। और सुरक्षित; यदि आप इसे एक नए URL में जोड़ना भूल जाते हैं, तो सबसे खराब स्थिति यह हो सकती है कि एक गुमनाम URL संरक्षित है। यदि आप इसे दूसरे तरीके से करते हैं, तो "आवश्यकता: सत्य:" निर्दिष्ट करते हुए, और आप इसे URL में जोड़ना भूल जाते हैं, आप जनता के लिए एक संवेदनशील पृष्ठ लीक कर रहे हैं।

फिर इसे चलाएं जहां भी आपको लगता है कि आपके कोड डिजाइन सबसे अच्छा है।

//I put it right after the main app module config. I.e. This thing:
angular.module('app', [ /* your dependencies*/ ])
       .config(function (/* you injections */) { /* your config */ })

//Make sure there's no ';' ending the previous line. We're chaining. (or just use a variable)
//
//Then force the logon page
.run(function ($rootScope, $state, $location, User /* My custom session obj */) {
    $rootScope.$on('$stateChangeStart', function(event, newState) {
        if (!User.authenticated && newState.allowAnonymous != true) {
            //Don't use: $state.go('login');
            //Apparently you can't set the $state while in a $state event.
            //It doesn't work properly. So we use the other way.
            $location.path("/login");
        }
    });
});

1

app.js

'use strict';
// Declare app level module which depends on filters, and services
var app= angular.module('myApp', ['ngRoute','angularUtils.directives.dirPagination','ngLoadingSpinner']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'homeCtrl'});
  $routeProvider.when('/salesnew', {templateUrl: 'partials/salesnew.html', controller: 'salesnewCtrl'});
  $routeProvider.when('/salesview', {templateUrl: 'partials/salesview.html', controller: 'salesviewCtrl'});
  $routeProvider.when('/users', {templateUrl: 'partials/users.html', controller: 'usersCtrl'});
    $routeProvider.when('/forgot', {templateUrl: 'partials/forgot.html', controller: 'forgotCtrl'});


  $routeProvider.otherwise({redirectTo: '/login'});


}]);


app.run(function($rootScope, $location, loginService){
    var routespermission=['/home'];  //route that require login
    var salesnew=['/salesnew'];
    var salesview=['/salesview'];
    var users=['/users'];
    $rootScope.$on('$routeChangeStart', function(){
        if( routespermission.indexOf($location.path()) !=-1
        || salesview.indexOf($location.path()) !=-1
        || salesnew.indexOf($location.path()) !=-1
        || users.indexOf($location.path()) !=-1)
        {
            var connected=loginService.islogged();
            connected.then(function(msg){
                if(!msg.data)
                {
                    $location.path('/login');
                }

            });
        }
    });
});

loginServices.js

'use strict';
app.factory('loginService',function($http, $location, sessionService){
    return{
        login:function(data,scope){
            var $promise=$http.post('data/user.php',data); //send data to user.php
            $promise.then(function(msg){
                var uid=msg.data;
                if(uid){
                    scope.msgtxt='Correct information';
                    sessionService.set('uid',uid);
                    $location.path('/home');
                }          
                else  {
                    scope.msgtxt='incorrect information';
                    $location.path('/login');
                }                  
            });
        },
        logout:function(){
            sessionService.destroy('uid');
            $location.path('/login');
        },
        islogged:function(){
            var $checkSessionServer=$http.post('data/check_session.php');
            return $checkSessionServer;
            /*
            if(sessionService.get('user')) return true;
            else return false;
            */
        }
    }

});

sessionServices.js

'use strict';

app.factory('sessionService', ['$http', function($http){
    return{
        set:function(key,value){
            return sessionStorage.setItem(key,value);
        },
        get:function(key){
            return sessionStorage.getItem(key);
        },
        destroy:function(key){
            $http.post('data/destroy_session.php');
            return sessionStorage.removeItem(key);
        }
    };
}])

loginCtrl.js

'use strict';

app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) {
    $scope.msgtxt='';
    $scope.login=function(data){
        loginService.login(data,$scope); //call login service
    };

}]);

1

आप उपयोग कर सकते हैं resolve:

angular.module('app',[])
.config(function($routeProvider)
{
    $routeProvider
    .when('/', {
        templateUrl  : 'app/views/login.html',
        controller   : 'YourController',
        controllerAs : 'Your',
        resolve: {
            factory : checkLoginRedirect
        }
    })
}

और, संकल्प का कार्य:

function checkLoginRedirect($location){

    var user = firebase.auth().currentUser;

    if (user) {
        // User is signed in.
        if ($location.path() == "/"){
            $location.path('dash'); 
        }

        return true;
    }else{
        // No user is signed in.
        $location.path('/');
        return false;
    }   
}

फायरबेस में एक विधि भी है जो आपको एक पर्यवेक्षक स्थापित करने में मदद करती है, मैं इसे अंदर स्थापित करने की सलाह देता हूं .run:

.run(function(){

    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            console.log('User is signed in.');
        } else {
            console.log('No user is signed in.');
        }
    });
  }

0

उदाहरण के लिए एक एप्लिकेशन में एप और औक नामक दो उपयोगकर्ता हैं। मैं प्रत्येक मार्ग के लिए एक अतिरिक्त संपत्ति पास कर रहा हूं और $ मार्ग परिवर्तन में मिलने वाले डेटा के आधार पर रूटिंग को संभाल रहा हूं।

इसे इस्तेमाल करे:

angular.module("app").config(['$routeProvider',
function ($routeProvider) {

    $routeProvider.
            when('/ap', {
                templateUrl: 'template1.html',
                controller: 'template1',
                isAp: 'ap',
            }).
            when('/auc', {
                templateUrl: 'template2.html',
                controller: 'template2',
                isAp: 'common',
            }).
            when('/ic', {
                templateUrl: 'template3.html',
                controller: 'template3',
                isAp: 'auc',
            }).
            when('/mup', {
                templateUrl: 'template4.html',
                controller: 'template4',
                isAp: 'ap',
            }).

            when('/mnu', {
                templateUrl: 'template5.html',
                controller: 'template5',
                isAp: 'common',
            }).                               
            otherwise({
                redirectTo: '/ap',
            });
   }]);

app.js:

.run(['$rootScope', '$location', function ($rootScope, $location) {                
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
        if (next.$$route.isAp != 'common') {
            if ($rootScope.userTypeGlobal == 1) {
                if (next.$$route.isAp != 'ap') {
                    $location.path("/ap");
                }
            }
            else {
                if (next.$$route.isAp != 'auc') {
                    $location.path("/auc");
                }                        
            }
        }

    });
}]);

0

सभी ने बड़े समाधान का सुझाव दिया है कि आप ग्राहक पक्ष पर सत्र की चिंता क्यों कर रहे हैं। मेरा मतलब है कि जब राज्य / url में परिवर्तन होता है, तो मुझे लगता है कि आप डेटा को लोड करने के लिए एक अजाक्स कॉल कर रहे हैं।

Note :- To Save user's data you may use `resolve` feature of `ui-router`.
 Check cookie if it exist load template , if even cookies doesn't exist than 
there is no chance of logged in , simply redirect to login template/page.

अब ajax डेटा को किसी भी एपीआई का उपयोग करके सर्वर द्वारा वापस किया जाता है। अब बिंदु खेल में आ गया, उपयोगकर्ता की स्थिति में लॉग इन के अनुसार सर्वर का उपयोग करके मानक वापसी प्रकार लौटाएं। उन रिटर्न कोड की जाँच करें और नियंत्रक में आपके अनुरोध को संसाधित करें। नोट: - कंट्रोलर के लिए, जिसे नेट पर कॉल करने के लिए anjax कॉल की आवश्यकता नहीं है, आप इस तरह से सर्वर को एक खाली अनुरोध कॉल कर सकते हैं server.location/api/checkSession.phpऔर यह है checkSession.php

<?php/ANY_LANGUAGE
session_start();//You may use your language specific function if required
if(isset($_SESSION["logged_in"])){
set_header("200 OK");//this is not right syntax , it is just to hint
}
else{
set_header("-1 NOT LOGGED_IN");//you may set any code but compare that same       
//code on client side to check if user is logged in or not.
}
//thanks.....

नियंत्रक के अंदर या किसी भी सेवा के माध्यम से ग्राहक के जवाब में जैसा कि अन्य उत्तरों में दिखाया गया है

    $http.get(dataUrl)
    .success(function (data){
        $scope.templateData = data;
    })
    .error(function (error, status){
        $scope.data.error = { message: error, status: status};
        console.log($scope.data.error.status);
if(status == CODE_CONFIGURED_ON_SERVER_SIDE_FOR_NON_LOGGED_IN){
//redirect to login
  });

नोट: - मैं कल या भविष्य में और अपडेट करूंगा


-1

आपको दो मुख्य साइटों में उपयोगकर्ता प्रमाणीकरण की जांच करनी चाहिए।

  • जब उपयोगकर्ता स्थिति बदलते हैं, तो '$routeChangeStart'कॉलबैक का उपयोग करके इसकी जांच करते हैं
  • जब इंटरसेप्टर का उपयोग करते हुए कोणीय से $ http अनुरोध भेजा जाता है।
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.