AngularJS- প্রতিটি রুট এবং নিয়ামকটিতে লগইন এবং প্রমাণীকরণ


130

আমার একটি অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশন রয়েছে যোমেন, গ্রান্ট এবং বোরওয়ার ব্যবহার করে তৈরি।

আমার একটি লগইন পৃষ্ঠা রয়েছে যাতে এমন একটি নিয়ামক রয়েছে যা প্রমাণীকরণের জন্য পরীক্ষা করে। শংসাপত্রগুলি সঠিক হলে আমি হোম পৃষ্ঠায় প্রত্যাবর্তন করি।

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। যখন রুটটি পরিবর্তন হবে, এটি ব্যবহারকারী লগড হয়েছে কিনা তা পরীক্ষা করে দেখবে theisLoggedIn পদ্ধতিটি এটি পরিচালনা করা উচিত)। ব্যবহারকারী লগ না থাকলে এটি অনুরোধ করা রুটটি লোড করবে না এবং এটি ব্যবহারকারীকে ডান পৃষ্ঠায় পুনর্নির্দেশ করবে (আপনার ক্ষেত্রে লগইনে)।

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
লগইনকন্ট্রোলার ব্যবহারকারীকে লগইন পৃষ্ঠা থেকে লগইন করার অনুমতি দেবে। এটি লগইন ফর্মটি পরিচালনা করবে। ফর্মটি এমন একটি জমা পদ্ধতি কল করতে হবে যা আপনার লগইনকন্ট্রোলারের অংশ। এই পদ্ধতিটি আপডেট হবে (যদি ফর্মটি সঠিক হয় এবং ব্যবহারকারীর লগ ইন করতে হয়) আমি বর্ণিত আথ পরিষেবা ব্যবহার করে ব্যবহারকারীর অবস্থা।
গাব

2
মোহন মত কাজ! প্রদত্ত পরিষেবার পরিবর্তে আমি অ্যাংুলারজেএস-এর সাথে অথ0 ব্যবহার করেছি
নিকোস বাক্সেভানিস

34
যদি ব্যবহারকারী এফ 5 এড়িয়ে সতেজ হন? তারপরে আপনার স্মৃতিতে আথ চলে গেল।
গৌই

4
অন্যদের যদি এই উদাহরণটি চালাতে সমস্যা হয় তবে: routeChangeStartকলব্যাকে আপনার অবস্থানটি "লগইন" আসলে কিনা তা যাচাই করে নেওয়া উচিত:if ( $location.path() === "/login" ) return;
ব্যবহারকারী 2084865

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
@ লেবেল্যাঙ্কমিনিসেস ধন্যবাদ :) কেবল এটিকে আরও পরিষ্কার করার জন্য: অচেতনার অর্থ "আপনি কে আপনি তা আমরা জানি না, তাই আপনি যদি এই সংস্থানটি অ্যাক্সেসের জন্য অনুমোদিত হন বা না হন তবে আমরা প্রথমে সাইন ইন করতে পারি না" তবে ফোর্বডডেন এর অর্থ "আমরা জানি আপনি কে এবং আপনার প্রোফাইল আপনাকে এই সংস্থানটিতে অ্যাক্সেস করার অনুমতি দেয় না"
sp00m

1
দুর্দান্ত সমাধান, সার্ভারের পাশের স্প্রিং প্রমাণীকরণের সাথে সম্ভাব্য ফিট
জানু পিটার

1
সর্বকালের সেরা সমাধান!
রেনান ফ্রাঙ্কা

1
@jsbisht আপনি অ্যাক্সেস টোকেন (গুলি) কোথায় রাখবেন (শেষ স্নিপেটটি দেখুন) তার উপর নির্ভর করে। আপনি যদি এটি কেবল জেএস মেমরির মধ্যে সঞ্চয় করেন তবে হ্যাঁ: F5 প্রমাণীকরণের তথ্য সরিয়ে দেবে। তবে আপনি যদি এটি অবিচ্ছিন্ন স্টোরেজে সংরক্ষণ করেন (যেমন কুকি / লোকালস্টোরেজ / সেশনস স্টোরেজ), তবে না: এফ 5 প্রমাণীকরণের তথ্য সরিয়ে ফেলবে না (যতক্ষণ না আপনি প্রতিটি $ HTTP অনুরোধগুলিতে টোকেনটি সংযুক্ত করেন না, বা কমপক্ষে প্রেরিত অনুরোধগুলিতে) বিশ্রাম / ব্যবহারকারী / প্রোফাইল, যেমন সার্ভারটি সংযুক্ত টোকেনের সাথে লিঙ্কযুক্ত ব্যবহারকারীর প্রোফাইলটি প্রত্যাশা করবে)। যদিও কুকি স্টোরেজ ব্যবহার করার সময় সিএসআরএফ থেকে সাবধান থাকুন।
sp00 মি

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'
        });
})

২) একটি শীর্ষ স্তরের নিয়ামক যা 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
আমরা কি সমস্ত স্থানে সমস্ত রুটের 'প্রয়োজনীয়তাথ: সত্য' বৈশিষ্ট্যটি নির্দিষ্ট করতে পারি? কারণ আমার দৃশ্যে এগুলি কোনও লগইন পৃষ্ঠা নয় তবে এটি তৃতীয় পক্ষের বিশ্রাম কল থেকে প্রমাণীকৃত হচ্ছে। সুতরাং আমি এক জায়গায় নির্দিষ্ট করতে চেয়েছিলাম এবং এটি ভবিষ্যতের সংযুক্ত রুটের জন্যও প্রয়োগ করা উচিত।
রঘুবীর

1
আমি জানি না। সম্ভবত আপনি যে প্রতিটি রুটে একটি বিশেষ সম্পত্তি সংজ্ঞায়িত না করেছেন তা পরীক্ষা করতে পারেন routes.js
ডটবট

1
দুর্দান্ত এবং সাধারণ উদাহরণ I এটি আমার প্রয়োজনের জন্য খুব সহায়ক।
ত্রুটি 505

6

অ্যাংুলারের সাথে কীভাবে ব্যবহারকারীর নিবন্ধকরণ এবং লগইন কার্যকারিতা সেট আপ করতে হবে তার কয়েক মাস আগে আমি একটি পোস্ট লিখেছিলাম, আপনি এটি http://jasonwatmore.com/post/2015/03/10/AngularJS- ব্যবহারকারীর-নিবন্ধন- এবং এটি পরীক্ষা করে দেখতে পারেন -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
}

আপনার কখনই "অনুমতি অজ্ঞাতনামা: মিথ্যা" নির্দিষ্ট করার দরকার নেই, যদি উপস্থিত না থাকে তবে এটি চেক হিসাবে মিথ্যা বলে ধরে নেওয়া হয়। এমন একটি অ্যাপে যেখানে বেশিরভাগ 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

আপনি ক্লায়েন্ট পক্ষের অধিবেশন নিয়ে কেন উদ্বেগ করছেন তা সকলেই বড় সমাধানের পরামর্শ দিয়েছে। আমি বলতে চাইছি যখন রাষ্ট্র / ইউআরএল পরিবর্তন হয় তখন আমি মনে করি আপনি ডেমিটেটেটের জন্য ডেটা লোড করার জন্য একটি অজ্যাক্স কল করছেন।

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.

এখন অ্যাজাক্স ডেটা সার্ভারের মাধ্যমে কোনও এপিআই ব্যবহার করে ফিরে আসে। এখন পয়েন্টটি খেলতে আসল, ব্যবহারকারীর লগ ইন হওয়া স্ট্যাটাস অনুযায়ী সার্ভার ব্যবহার করে স্ট্যান্ডার্ড রিটার্ন প্রকারগুলি ফিরুন। এই রিটার্ন কোডগুলি পরীক্ষা করুন এবং আপনার অনুরোধটিকে নিয়ামকটিতে প্রক্রিয়া করুন। দ্রষ্টব্য: - নিয়ামকের জন্য যার server.location/api/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'কলব্যাক ব্যবহার করে এটি পরীক্ষা করে checking
  • যখন একটি ইন্টারসেপ্টর ব্যবহার করে কৌনিক থেকে একটি $ HTTP অনুরোধ প্রেরণ করা হয়।
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.