AngularJS- Her yol ve denetleyicide Oturum Açma ve Kimlik Doğrulama


130

Yeoman, grunt ve bower kullanılarak oluşturulmuş bir AngularJS uygulamam var.

Kimlik doğrulamasını kontrol eden bir denetleyiciye sahip bir oturum açma sayfam var. Kimlik bilgileri doğruysa ana sayfaya yeniden yönlendiriyorum.

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

Ana sayfada var

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

İçinde loginController giriş bilgilerini kontrol ediyorum ve başarılı olursa servis fabrikasında kullanıcı nesnesini ayarlıyorum. Bunun doğru olup olmadığını bilmiyorum.

İhtiyacım olan şey, kullanıcı oturum açtığında, diğer tüm sayfaların bu değeri alabilmesi için kullanıcı nesnesinde bir değer belirler.

Herhangi bir rota değişikliği olduğunda, kontrolör kullanıcının oturum açıp açmadığını kontrol etmelidir. Değilse, giriş sayfasına yeniden yönlendirmelidir. Ayrıca, kullanıcı zaten oturum açtıysa ve sayfaya geri döndüyse, ana sayfaya gitmesi gerekir. Denetleyici ayrıca tüm yollardaki kimlik bilgilerini kontrol etmelidir.

Ng-çerezlerini duydum ama nasıl kullanacağımı bilmiyorum.

Gördüğüm örneklerin çoğu çok net değildi ve bir tür erişim rolleri veya başka bir şey kullanıyorlar. Bunu istemiyorum Sadece bir giriş filtresi istiyorum. Biri bana fikir verebilir mi?

Yanıtlar:


180

Çözümüm 3 bölüme ayrılıyor: kullanıcının durumu bir serviste, rota değiştiğinde izlediğiniz çalıştırma yönteminde saklanır ve kullanıcının istenen sayfaya erişmesine izin verilip verilmediğini kontrol edersiniz, eğer izlediğiniz ana kontrol cihazınızda kullanıcı değişikliğinin durumu.

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

AuthKullanıcı nesnesini işleyecek ve kullanıcının oturum açıp açmadığını bilmek için bir yönteme sahip bir hizmet oluşturmalısınız (adını vereceğim ).

hizmet :

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

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

Sizden etkinliği app.rundinlemelisiniz $routeChangeStart. Rota değiştiğinde, kullanıcının oturum açıp açmadığını kontrol edecektir (isLoggedIn yöntem bunu halletmelidir). Kullanıcı oturum açmamışsa istenen yolu yüklemeyecek ve kullanıcıyı doğru sayfaya yönlendirecektir (oturum açma durumunda).

loginControllerSap giriş için giriş sayfanızda kullanılmalıdır. Sadece hizmetle etkileşime girmeli Authve kullanıcıyı oturum açmış olarak ayarlamalıdır.

loginController :

.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
  };
}])

Ana denetleyicinizden, kullanıcı durumunun değişip değişmediğini ve bir yönlendirme ile tepki vermesini dinleyebilirsiniz.

.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, kullanıcının oturum açma sayfasından oturum açmasına izin verecektir. Giriş formunu idare edecektir. Form, loginController'ınızın bir parçası olan bir gönderme yöntemi çağırmalıdır. Bu yöntem, (form doğruysa ve kullanıcının oturum açmış olması gerekiyorsa), tanımladığım Auth hizmetini KULLANAN kullanıcının durumunu güncelleyecektir.
gab

2
Büyü gibi çalıştı! Sunulan hizmet yerine Auth0'ı AngularJS ile kullandım .
Nikos Baxevanis

34
Ya kullanıcı F5'e basarsa ve yenilerse? Sonra bellekteki Auth gitmiş olur.
Gaui

4
Başkalarının bu örneği çalıştırırken sorun routeChangeStartif ( $location.path() === "/login" ) return;
yaşaması ihtimaline

1
beni sonsuz döngüye sokuyor.
Nipun Tyagi

110

Burada veya 'nin resolveözniteliğini kullanan olası başka bir çözüm vardır . Örnek :$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 mevcut kullanıcı haklarına bağlı olarak bir sözü çözer veya reddeder:

.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;

}])

UserProfilekopyalar geçerli kullanıcı özellikleri ve uygulama $hasRole, $hasAnyRole, $isAnonymousve $isAuthenticatedyöntemler mantığı (artı bir $refreshyöntem olup, daha sonra anlatılacak):

.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 sunucudan kullanıcı profilini bilmesini istemekten sorumludur (örneğin, isteğe ekli bir erişim jetonuna bağlı):

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

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

}])

Sunucunun şu talepte bulunurken böyle bir JSON nesnesi döndürmesi bekleniyor 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
}

Son olarak, Accessbir sözü reddettiğinde, kullanılıyorsa ui.router, $stateChangeErrorolay tetiklenir:

.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;

    }
  });

}])

Kullanılıyorsa ngRoute, $routeChangeErrorolay tetiklenecektir:

.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;

    }
  });

}])

Kullanıcı profiline kontrolörlerden de erişilebilir:

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

UserProfiledaha sonra istekte bulunurken sunucu tarafından döndürülen özellikleri içerir GET api/auth:

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

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

}])

UserProfileBir kullanıcı oturum açtığında veya kapattığında yenilenmesi gerekir, böylece Accessyeni kullanıcı profiliyle rotaların üstesinden gelebilir. Ya tüm sayfayı yeniden yükleyebilir ya da arayabilirsiniz UserProfile.$refresh(). Oturum açarken örnek:

.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
Bence bu en basit ve aynı zamanda en genişletilebilir cevap
Jotham

2
@LeblancMeneses Teşekkürler :) Sadece daha açık hale getirmek için: YETKİSİZ "kim olduğunuzu bilmiyoruz, bu nedenle bu kaynağa erişmeye yetkili olup olmadığınızı söyleyemeyiz, lütfen önce oturum açın" anlamına gelir , YASAKTIR "Kim olduğunuzu biliyoruz ve profiliniz bu kaynağa erişmenize izin vermiyor" anlamına gelir .
sp00m

1
Güzel çözüm, sunucu tarafında Spring kimlik doğrulamasına potansiyel uyum
Ocak

1
Şimdiye kadarki en iyi çözüm!
Renan Franca

1
@jsbisht Her şey erişim jetonlarını nerede sakladığınıza bağlıdır (son parçaya bakın). Eğer varsa sadece JS bellekte saklamak, o zaman evet: F5 auth bilgi kaldıracaktır. Ancak, kalıcı bir depolama alanında (örn. Çerez / localStorage / sessionStorage) saklarsanız, no: F5 kimlik doğrulama bilgilerini kaldırmaz (belirteci her $ http isteğine veya en azından gönderilen isteklere eklediğiniz sürece) rest / users / profile, sunucunun ekli jetona bağlı kullanıcının profilini döndürmesi beklendiğinden). Çerez depolamasını kullanırken CSRF'ye dikkat edin.
sp00m

21

Tek tek rotalar için özel davranışı tanımlamanın en basit yolu oldukça kolay olacaktır:

1) routes.js: requireAuthİstediğiniz herhangi bir rota için yeni bir mülk (gibi ) oluşturun

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) içinde bir elemanına bağlı olmayan bir üst katman denetleyicisi ng-viewaçısal ile kaçının çatışma ( $routeProvider), kontrol newUrlolan requireAuthözellik ve buna göre hareket

 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
Tek bir yerdeki tüm rotalar için 'requireAuth: true' özelliğini belirtebilir miyiz? Çünkü benim senaryomda, bir giriş sayfası değil, üçüncü taraf dinlenme çağrısından doğrulanıyor. Bu yüzden tek bir yerde belirtmek istedim ve ileride eklenecek rotalar için de geçerli olmalı.
Raghuveer

1
Bildiğim kadarıyla hayır. Belki de tanımlanmış özel bir özelliği OLMAYAN her rotayı kontrol edebilirsiniz routes.js.
DotBot

1
Harika ve basit bir örnek, ihtiyaçlarım için çok yardımcı oldu.
error505

6

Angular ile kullanıcı kaydı ve oturum açma işlevinin nasıl kurulacağına dair birkaç ay önce bir gönderi yazdım, bunu http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and adresinden kontrol edebilirsiniz. -Login-Example.aspx

Kullanıcının $locationChangeStartetkinlikte oturum açıp açmadığını kontrol ediyorum , işte bunu gösteren ana app.js'im:

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

Yazmak güzel. Referans için kullandım. Teşekkür ederim @ Jason.
Venkat Kotra

2

Bunun en kolayı olduğunu düşünüyorum, ama belki de sadece kişisel bir tercihtir.

Oturum açma rotanızı (ve diğer anonim yolları; ör. / Register, / logout, / renewToken vb.) Belirttiğinizde, ekleyin:

allowAnonymous: true

Yani, bunun gibi bir şey:

$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
}

Hiçbir zaman "allowAnonymous: false" seçeneğini belirtmenize gerek yoktur, yoksa, denetimde yanlış olduğu varsayılır. Çoğu URL'nin zorunlu kimlik doğrulamasının yapıldığı bir uygulamada, bu daha az iş demektir. Ve daha güvenli; Yeni bir URL’ye eklemeyi unutursanız, olabilecek en kötü şey anonim bir URL’nin korunmasıdır. Bunu başka bir şekilde yaparsanız, "requireAuthentication: true" belirterek bunu bir URL'ye eklemeyi unutursanız, hassas bir sayfayı herkese sızdırmış olursunuz.

Ardından bunu kod tasarımınıza en uygun olduğunu düşündüğünüz yerde çalıştırın.

//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

Şunları kullanabilirsiniz resolve:

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

Ve kararın işlevi:

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

Firebase ayrıca bir gözlemci kurmanıza yardımcı olan bir yönteme sahiptir, bunu aşağıdakilerin içine kurmanızı öneririm .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

Örneğin bir uygulamanın ap ve auc adında iki kullanıcısı vardır. Her yola fazladan bir özellik aktarıyorum ve $ routeChangeStart içinde aldığım verilere göre yönlendirmeyi işliyorum.

Bunu dene:

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

Hepsi müşteri tarafında neden oturum endişesi duyduğunuza dair büyük bir çözüm önerdi. Demek istediğim, durum / url değiştiğinde, tempelate için verileri yüklemek için bir ajax çağrısı yaptığınızı varsayıyorum.

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.

Artık ajax verileri herhangi bir api kullanılarak sunucu tarafından döndürülür. Şimdi nokta devreye girdi, kullanıcının oturum açmış durumuna göre sunucuyu kullanarak standart iade türlerini döndür. Bu iade kodlarını kontrol edin ve isteğinizi kontrolörde işleyin. Not: - Yerel olarak bir ajax çağrısı gerektirmeyen kontrolör için, bunun gibi sunucuya boş bir istek çağırabilirsiniz server.location/api/checkSession.phpve bu checkSession.php'dir.

<?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.....

İstemci tarafında, denetleyicinin içinde veya diğer yanıtlarda gösterildiği gibi herhangi bir hizmet aracılığıyla

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

Not: - Yarın veya gelecekte daha fazla güncelleme yapacağım


-1

Kullanıcı kimlik doğrulamasını iki ana sitede kontrol etmelisiniz.

  • Kullanıcılar durumu değiştirdiğinde, '$routeChangeStart'geri aramayı kullanarak kontrol edin
  • Bir $ http talebi, bir engelleyici kullanılarak açısaldan gönderildiğinde.
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.