শর্তের ভিত্তিতে একটি নির্দিষ্ট রুটে পুনঃনির্দেশ করা


493

আমি একটি ছোট অ্যাঙ্গুলারজেএস অ্যাপ লিখছি যাতে লগইন ভিউ এবং একটি মূল ভিউ রয়েছে, এটি কনফিগার করা হয়েছে:

$routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController})
 .otherwise({redirectTo: '/login'});

আমার লগইনকন্ট্রোলার ব্যবহারকারী / পাস সংমিশ্রণটি পরীক্ষা করে এবং এটি প্রতিফলিত করে on রুটস্কোপে একটি সম্পত্তি সেট করে:

function LoginController($scope, $location, $rootScope) {
 $scope.attemptLogin = function() {
   if ( $scope.username == $scope.password ) { // test
        $rootScope.loggedUser = $scope.username;
        $location.path( "/main" );
    } else {
        $scope.loginError = "Invalid user/pass.";
    }
}

সবকিছু কাজ করে তবে আমি যদি অ্যাক্সেস http://localhost/#/mainকরি তবে লগইন স্ক্রিনটি বাইপাস করে শেষ করব। আমি "যখনই রুট পরিবর্তন হয়," $ rootScope.loggedUser নাল হয় তবে / লগইনে পুনঃনির্দেশ "এর মতো কিছু লিখতে চেয়েছিলাম

...

... অপেক্ষা করুন। আমি কি কোনওভাবে রুটের পরিবর্তনগুলি শুনতে পারি? আমি এই প্রশ্নটি যাইহোক পোস্ট করব এবং তাকাতে থাকব।


3
কেবল স্পষ্ট করে বলার জন্য: নীচের অনেকগুলি সমাধান ভালভাবে কাজ করার সময়, আমি সম্প্রতি নীচে @ ওরানের উত্তরটি গ্রহণ করতে আগ্রহী হয়েছি - এটি হ'ল সংবেদনশীল ইউআরএল চাইলে 401 কোড দিয়ে সার্ভারকে প্রতিক্রিয়া জানাতে হবে এবং সেই তথ্য নিয়ন্ত্রণ করতে ব্যবহার করতে হবে ক্লায়েন্টের "লগইন বক্স"। (তবে জুরিটি এখনও "অস্বীকৃত অনুরোধগুলির জন্য সারি
বেঁধে রেখেছিল

উত্তর:


510

কিছু ডকুমেন্টেশন এবং উত্স কোডের মাধ্যমে কিছু ডাইভিংয়ের পরে, আমি মনে করি এটি কাজ করে চলেছে। সম্ভবত এটি অন্য কারও জন্য কার্যকর হবে?

আমি আমার মডিউল কনফিগারেশনে নিম্নলিখিতগুলি যুক্ত করেছি:

angular.module(...)
 .config( ['$routeProvider', function($routeProvider) {...}] )
 .run( function($rootScope, $location) {

    // register listener to watch route changes
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
      if ( $rootScope.loggedUser == null ) {
        // no logged user, we should be going to #login
        if ( next.templateUrl != "partials/login.html" ) {
          // not going to #login, we should redirect now
          $location.path( "/login" );
        }
      }         
    });
 })

যেটি বিষয়টিকে বিজোড় বলে মনে হচ্ছে তা হ'ল আমাকে আংশিক নামটি পরীক্ষা করতে হয়েছিল ( login.html) কারণ "পরবর্তী" রুটের অবজেক্টটিতে url বা অন্য কিছু নেই। আরও ভাল উপায় আছে?


13
শান্ত মানুষ, আপনার সমাধান ভাগ করে নেওয়ার জন্য ধন্যবাদ। একটি বিষয় লক্ষণীয়: বর্তমান সংস্করণে এটি "পরবর্তী। $ রুট.টেম্পলেট ইউআরএল"
ডাবলড্রিস্কল

5
যদি আপনি ক্রোম ইন্সপেক্টরটিতে নেটওয়ার্কের অনুরোধগুলির দিকে নজর দেন তবে যে রুটটি পুনঃনির্দেশিত হচ্ছে (এখনও ব্যবহারকারী লগইন করা হয়নি) এখনও কল হয়ে যায় এবং ব্রাউজারে একটি প্রতিক্রিয়া পাঠানো হয় এবং তারপরে পুনঃনির্দেশিত পথ / লগইন বলা হয়। সুতরাং এই পদ্ধতিটি কোনও ভাল নয় কারণ লগ-ইন না হওয়া ব্যবহারকারীরা যে রাস্তায় প্রবেশ করতে হবে সেটির প্রতিক্রিয়া দেখতে পান see
Sonicboom

34
রুটটি কল হওয়া থেকে বিরত রাখতে এবং অরক্ষিত ব্যবহারকারীদের যাতে তাদের অ্যাক্সেস না করা উচিত সেই সামগ্রীটি দেখতে দেয় $ রুটচেনস্টার্টের পরিবর্তে $ লোকেশনচেনস্টার্ট ব্যবহার করুন।
Sonicboom

17
মনে রাখবেন এটি ক্লায়েন্ট। সার্ভারসাইড বাধাও থাকতে হবে।
নাইকোস

2
@ সোনিকবোম $ লোকেশন চেঞ্জস্টার্টটি বোঝায় না যে সমস্ত রুটের যদি প্রমাণীকরণের প্রয়োজন হয় না, $ রুট চেঞ্জস্টার্টের সাহায্যে আপনি রুট অবজেক্টগুলিতে মেটাডেটা রাখতে পারেন, যেমন এটি অনুমোদনযোগ্য কিনা বা সেই রুটের জন্য কোন ভূমিকা নিতে হবে। আপনার সার্ভারটি অনুমোদনহীন সামগ্রী না দেখানো পরিচালনা করবে এবং অ্যাঙ্গুলারজেএস কোনওভাবে রুট পরিবর্তনের পরে প্রক্রিয়া শুরু করবে না, সুতরাং কিছুই দেখানো উচিত নয়।
ক্রিস নিকোলা

93

এখানে 'সমাধান' কনফিগারেশন সম্পত্তি এবং 'প্রতিশ্রুতি' দিয়ে ডেটা উপর নির্ভর করে রাউটিং এবং রাউটিং বিধিগুলিতে ইভেন্টের ডেটা লোডিং সক্ষম করে একটি আরও মার্জিত এবং নমনীয় সমাধান হতে পারে।

আপনি রাউটিং কনফিগারেশন এবং ফাংশন লোড এবং চেক ডেটা, সমস্ত পুনর্নির্দেশ করুন, মধ্যে 'সমাধান' একটি ফাংশন নির্দিষ্ট। যদি আপনাকে ডেটা লোড করতে হয় তবে আপনি একটি প্রতিশ্রুতি ফেরান, যদি আপনাকে পুনঃনির্দেশ করা দরকার - এর আগে প্রতিশ্রুতি প্রত্যাখ্যান করুন। সমস্ত বিবরণ $ রাউটারপ্রাইডার এবং $ q ডকুমেন্টেশন পৃষ্ঠায় পাওয়া যাবে।

'use strict';

var app = angular.module('app', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: "login.html",
                controller: LoginController
            })
            .when('/private', {
                templateUrl: "private.html",
                controller: PrivateController,
                resolve: {
                    factory: checkRouting
                }
            })
            .when('/private/anotherpage', {
                templateUrl:"another-private.html",
                controller: AnotherPriveController,
                resolve: {
                    factory: checkRouting
                }
            })
            .otherwise({ redirectTo: '/' });
    }]);

var checkRouting= function ($q, $rootScope, $location) {
    if ($rootScope.userProfile) {
        return true;
    } else {
        var deferred = $q.defer();
        $http.post("/loadUserProfile", { userToken: "blah" })
            .success(function (response) {
                $rootScope.userProfile = response.userProfile;
                deferred.resolve(true);
            })
            .error(function () {
                deferred.reject();
                $location.path("/");
             });
        return deferred.promise;
    }
};

রাশিয়ানভাষী লোকদের জন্য হাবরে একটি পোস্ট আছে " ular условного раутинга в অ্যাঙ্গুলারজেএস ।"


1
চেকআরউটিং ফাংশনটি কারখানায় ম্যাপ করা হয় কেন? এটি কী ম্যাপ করেছে তাতে কিছু আসে যায় না?
honkskillet

@ হোনস্কিললেট: কৌণিক $ রুটপ্রভাইডার ডক্স থেকে: "ফ্যাক্টরি - {স্ট্রিং | ফাংশন}: স্ট্রিং যদি হয় তবে এটি কোনও পরিষেবার জন্য একটি উলাম Otherwise ফলাফল একটি প্রতিশ্রুতি, এটির নিয়ামকটির মানটি ইনজেকশনের আগেই এটি সমাধান করা হয় aware সচেতন থাকুন g রুটপ্যারামগুলি এখনও এই সমাধানের ফাংশনগুলির মধ্যে পূর্ববর্তী রুটটি উল্লেখ করবে the রুট কনভার্ট.প্রেমগুলি নতুন রুটের পরামিতিগুলিতে অ্যাক্সেস পেতে, পরিবর্তে." সংকল্প নিয়ে থাকা দস্তাবেজগুলি থেকেও: "যদি প্রতিশ্রুতিগুলির কোনও প্রত্যাখ্যান করা হয় তবে $ রুট চেঞ্জেরের ইভেন্টটি বরখাস্ত করা হবে।"
টিম পেরি

যদি ui.routerব্যবহার $stateProvider হয় তবে এর পরিবর্তে ব্যবহার করুন $routeProvider

61

আমিও একই চেষ্টা করে যাচ্ছি। সহকর্মীর সাথে কাজ করার পরে আরও একটি সহজ সমাধান নিয়ে এসেছেন। আমি একটি ঘড়ি সেট আপ আছে $location.path()। কৌতুকটি করে আমি সবেমাত্র AngularJS শিখতে শুরু করেছি এবং এটি আরও পরিষ্কার এবং পাঠযোগ্য বলে মনে করি।

$scope.$watch(function() { return $location.path(); }, function(newValue, oldValue){  
    if ($scope.loggedIn == false && newValue != '/login'){  
            $location.path('/login');  
    }  
});

এটি খুব আকর্ষণীয় দেখায়। আপনি কি কোথাও একটি উদাহরণ পোস্ট করতে পেরেছিলেন?
কাইলরোচে

3
আপনি কোথায় ঘড়ি সেটআপ করবেন?
freakTheM غالب

3
@freakTheM غالب আপনি আপনার mainCtrl ফাংশনটিতে ঘড়িটি সেট আপ করতে হবে, যেখানে এনজি-কন্ট্রোলার মেইনসিটিআরএল সেট করা আছে। উদাহরণস্বরূপ <বডি এনজি-কন্ট্রোলার = "মেইনসিটিআরএল">
ব্যবহারকারী1807337

5
আমি মনে করি এটি কেবল ন্যায্য যে যদি কোনও নেতিবাচক ভোট দেওয়া হয় তবে তার কারণ হিসাবে মন্তব্য করা উচিত। এটি একটি শেখার সরঞ্জাম হিসাবে সহায়তা করবে।
ব্যবহারকারী1807337

37

লগইন পুনঃনির্দেশ বাস্তবায়নের একটি ভিন্ন উপায় হ'ল এখানে বর্ণিত ইভেন্ট এবং ইন্টারসেপ্টর ব্যবহার করা । নিবন্ধটি কিছু অতিরিক্ত সুবিধা বর্ণনা করেছে যেমন লগইন প্রয়োজন হয় তা সনাক্ত করা, অনুরোধগুলি সারিবদ্ধ করা এবং লগইন সফল হওয়ার পরে সেগুলি পুনরায় খেলানো।

আপনি এখানে একটি কার্যকারী ডেমো চেষ্টা করে দেখতে পারেন এবং ডেমো উত্সটি এখানে দেখতে পারেন ।


3
লিঙ্কগুলি থেকে সম্পর্কিত তথ্য অন্তর্ভুক্ত করার জন্য আপনি দয়া করে এই উত্তরটি আপডেট করতে পারেন? এই লিঙ্কগুলি নিচে নামা হলেও এটি দর্শকদের পক্ষে কার্যকর হতে থাকবে।
জোস্লিবার

34

1. বিশ্বব্যাপী বর্তমান ব্যবহারকারী সেট করুন।

আপনার প্রমাণীকরণ পরিষেবাতে, বর্তমানে অনুমোদিত প্রমাণীকৃত ব্যবহারকারীকে মূল স্কোপে সেট করুন।

// AuthService.js

  // auth successful
  $rootScope.user = user

2. প্রতিটি সুরক্ষিত রুটে লেখার ফাংশন সেট করুন।

// AdminController.js

.config(function ($routeProvider) {
  $routeProvider.when('/admin', {
    controller: 'AdminController',
    auth: function (user) {
      return user && user.isAdmin
    }
  })
})

৩. প্রতিটি রুটের পরিবর্তনের উপর প্রবন্ধ পরীক্ষা করুন।

// index.js

.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeStart', function (ev, next, curr) {
    if (next.$$route) {
      var user = $rootScope.user
      var auth = next.$$route.auth
      if (auth && !auth(user)) { $location.path('/') }
    }
  })
})

বিকল্পভাবে আপনি ব্যবহারকারীর অবজেক্টে অনুমতি সেট করতে এবং প্রতিটি রুটকে একটি অনুমতি নির্ধারণ করতে পারেন, তারপরে ইভেন্ট কলব্যাকের অনুমতিটি পরীক্ষা করে দেখুন।


@ ম্যালকমলহল হ্যাঁ, এটি অপ্ট-ইন এবং আপনি অপ্ট-আউট করতে চান। পরিবর্তে লগইন পৃষ্ঠার মতো সর্বজনীন রুটে একটি "পাবলিক" বুলিয়ান যুক্ত করুন এবং পুনর্নির্দেশ করুনif (!user && !next.$$route.public)
এজেকডেজ

কেউ দয়া করে next.$$routeআমাকে ব্যাখ্যা করতে পারেন? আঙ্গুলের বর্ণনা দিয়ে কোন কৌনিক ডক্সে আমি কিছুই খুঁজে পাই না যা কোনও $routeChangeStartঘটনাকে যুক্তি দেয় তবে আমি ধরে নিই nextএবং currকোনও ধরণের লোকেশন অবজেক্ট? $$routeবিট google করা কঠিন।
স্কেজেডাল

2
আমি এখন দেখছি যে $$routeসম্পত্তিটি অ্যাংুলারগুলির একটি ব্যক্তিগত ভেরিয়েবল । আপনার উপর নির্ভর করা উচিত নয়, উদাহরণস্বরূপ দেখুন: stackoverflow.com/a/19338518/1132101 - আপনি যদি করেন তবে কৌনিক পরিবর্তন হলে আপনার কোডটি ভেঙে যেতে পারে।
স্কেজেডাল

2
আমি মাধ্যমে একটি ব্যক্তিগত সম্পত্তি অ্যাক্সেস বা লুপ না করেও রুট অ্যাক্সেস করার উপায় খুঁজে পেয়েছি $route.routesএকটি তালিকা তৈরী করতে (@ thataustin এর উত্তর হিসেবে): সঙ্গে অবস্থানের জন্য পথ পেতে next.originalPathএবং ব্যবহারের যে সূচক $route.routes: var auth = $route.routes[next.originalPath]
স্কেজেডাল

এই ইভেন্টে যে যুক্তি দেওয়া হয়েছে সে সম্পর্কে তিনটি মন্তব্য থেকে আমার প্রশ্নের উত্তর দেওয়ার জন্য - তারা সত্যই নিঃসংশ্লিষ্ট
স্কেজডাল

27

আমি এটি কীভাবে করেছি তা এখানে রয়েছে:

কনফিগারেশনে, আমি publicAccessকয়েকটি রুটগুলিতে একটি বৈশিষ্ট্য সেট করেছি যা আমি জনসাধারণের জন্য খুলতে চাই (যেমন লগইন বা নিবন্ধকরণ):

$routeProvider
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
    })
    .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        publicAccess: true
    })

তারপরে একটি রান ব্লকে, আমি সেই $routeChangeStartইভেন্টে একটি শ্রোতা সেট করেছি '/login'যা ব্যবহারকারীর অ্যাক্সেস বা রুটটি সর্বজনীনভাবে অ্যাক্সেস না করা পর্যন্ত পুনঃনির্দেশ করে :

angular.module('myModule').run(function($rootScope, $location, user, $route) {

    var routesOpenToPublic = [];
    angular.forEach($route.routes, function(route, path) {
        // push route onto routesOpenToPublic if it has a truthy publicAccess value
        route.publicAccess && (routesOpenToPublic.push(path));
    });

    $rootScope.$on('$routeChangeStart', function(event, nextLoc, currentLoc) {
        var closedToPublic = (-1 === routesOpenToPublic.indexOf($location.path()));
        if(closedToPublic && !user.isLoggedIn()) {
            $location.path('/login');
        }
    });
})

আপনি শর্তটি স্পষ্টতই isLoggedInঅন্য যে কোনও কিছুর কাছে বদলে দিতে পারেন ... এটি করার অন্য একটি উপায় দেখানো হচ্ছে।


এবং আপনার রান ব্লক আর্গুমেন্টে ব্যবহারকারী কী? একটি সেবা?
মোহামনাগ

হ্যাঁ, এটি এমন একটি পরিষেবা যা ব্যবহারকারীরা লগ ইন করেছেন কিনা তা পরীক্ষা করার জন্য কুকিজ ইত্যাদির যত্ন নেবে
Thataustin

আপনি nextLoc.$$route.publicAccessবিটিডব্লির মতো রুটটি অ্যাক্সেস করতে পারবেন ।
এজেকডেজ

বা ব্যবহার করুন $route.routes[nextLoc.originalPath], যা কোনও ব্যক্তিগত ভেরিয়েবল ব্যবহার করে না।
স্কেজেডাল

1
আসলে, আপনি কেবল পরীক্ষা করতে পারেন nextLoc && nextLoc.publicAccess!
স্কেজডাল

9

আমি এটি ইন্টারসেপ্টর ব্যবহার করে করছি। আমি একটি লাইব্রেরি ফাইল তৈরি করেছি যা সূচিপত্র HTML ফাইলটিতে যুক্ত করা যেতে পারে file এইভাবে আপনার বিশ্রাম পরিষেবা কলগুলির জন্য আপনার বিশ্বব্যাপী ত্রুটি পরিচালনা করবে এবং স্বতন্ত্রভাবে সমস্ত ত্রুটিগুলির যত্ন নেওয়ার দরকার নেই। আরও নীচে আমি আমার বেসিক-লেখক লগইন গ্রন্থাগারটিও আটকালাম। সেখানে আপনি দেখতে পাচ্ছেন যে আমি 401 ত্রুটিটিও পরীক্ষা করে দেখেছি এবং অন্য কোনও জায়গায় পুনর্নির্দেশ করেছি। Lib / ea-basic-auth-login.js দেখুন

lib / অনুপস্থিত HTTP-ত্রুটি handling.js

/**
* @ngdoc overview
* @name http-error-handling
* @description
*
* Module that provides http error handling for apps.
*
* Usage:
* Hook the file in to your index.html: <script src="lib/http-error-handling.js"></script>
* Add <div class="messagesList" app-messages></div> to the index.html at the position you want to
* display the error messages.
*/
(function() {
'use strict';
angular.module('http-error-handling', [])
    .config(function($provide, $httpProvider, $compileProvider) {
        var elementsList = $();

        var showMessage = function(content, cl, time) {
            $('<div/>')
                .addClass(cl)
                .hide()
                .fadeIn('fast')
                .delay(time)
                .fadeOut('fast', function() { $(this).remove(); })
                .appendTo(elementsList)
                .text(content);
        };

        $httpProvider.responseInterceptors.push(function($timeout, $q) {
            return function(promise) {
                return promise.then(function(successResponse) {
                    if (successResponse.config.method.toUpperCase() != 'GET')
                        showMessage('Success', 'http-success-message', 5000);
                    return successResponse;

                }, function(errorResponse) {
                    switch (errorResponse.status) {
                        case 400:
                            showMessage(errorResponse.data.message, 'http-error-message', 6000);
                                }
                            }
                            break;
                        case 401:
                            showMessage('Wrong email or password', 'http-error-message', 6000);
                            break;
                        case 403:
                            showMessage('You don\'t have the right to do this', 'http-error-message', 6000);
                            break;
                        case 500:
                            showMessage('Server internal error: ' + errorResponse.data.message, 'http-error-message', 6000);
                            break;
                        default:
                            showMessage('Error ' + errorResponse.status + ': ' + errorResponse.data.message, 'http-error-message', 6000);
                    }
                    return $q.reject(errorResponse);
                });
            };
        });

        $compileProvider.directive('httpErrorMessages', function() {
            return {
                link: function(scope, element, attrs) {
                    elementsList.push($(element));
                }
            };
        });
    });
})();

সিএসএস / HTTP-ত্রুটি handling.css

.http-error-message {
    background-color: #fbbcb1;
    border: 1px #e92d0c solid;
    font-size: 12px;
    font-family: arial;
    padding: 10px;
    width: 702px;
    margin-bottom: 1px;
}

.http-error-validation-message {
    background-color: #fbbcb1;
    border: 1px #e92d0c solid;
    font-size: 12px;
    font-family: arial;
    padding: 10px;
    width: 702px;
    margin-bottom: 1px;
}

http-success-message {
    background-color: #adfa9e;
    border: 1px #25ae09 solid;
    font-size: 12px;
    font-family: arial;
    padding: 10px;
    width: 702px;
    margin-bottom: 1px;
}

index.html

<!doctype html>
<html lang="en" ng-app="cc">
    <head>
        <meta charset="utf-8">
        <title>yourapp</title>
        <link rel="stylesheet" href="css/http-error-handling.css"/>
    </head>
    <body>

<!-- Display top tab menu -->
<ul class="menu">
  <li><a href="#/user">Users</a></li>
  <li><a href="#/vendor">Vendors</a></li>
  <li><logout-link/></li>
</ul>

<!-- Display errors -->
<div class="http-error-messages" http-error-messages></div>

<!-- Display partial pages -->
<div ng-view></div>

<!-- Include all the js files. In production use min.js should be used -->
<script src="lib/angular114/angular.js"></script>
<script src="lib/angular114/angular-resource.js"></script>
<script src="lib/http-error-handling.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>

lib / অনুপস্থিত EA-মৌলিক-প্রমাণীকরণ-login.js

প্রায় একই লগইন জন্য করা যেতে পারে। এখানে আপনার পুনর্নির্দেশের উত্তর রয়েছে (। লোকেশন.পথ ("/ লগইন"))।

/**
* @ngdoc overview
* @name ea-basic-auth-login
* @description
*
* Module that provides http basic authentication for apps.
*
* Usage:
* Hook the file in to your index.html: <script src="lib/ea-basic-auth-login.js">  </script>
* Place <ea-login-form/> tag in to your html login page
* Place <ea-logout-link/> tag in to your html page where the user has to click to logout
*/
(function() {
'use strict';
angular.module('ea-basic-auth-login', ['ea-base64-login'])
    .config(['$httpProvider', function ($httpProvider) {
        var ea_basic_auth_login_interceptor = ['$location', '$q', function($location, $q) {
            function success(response) {
                return response;
            }

            function error(response) {
                if(response.status === 401) {
                    $location.path('/login');
                    return $q.reject(response);
                }
                else {
                    return $q.reject(response);
                }
            }

            return function(promise) {
                return promise.then(success, error);
            }
        }];
        $httpProvider.responseInterceptors.push(ea_basic_auth_login_interceptor);
    }])
    .controller('EALoginCtrl', ['$scope','$http','$location','EABase64Login', function($scope, $http, $location, EABase64Login) {
        $scope.login = function() {
            $http.defaults.headers.common['Authorization'] = 'Basic ' + EABase64Login.encode($scope.email + ':' + $scope.password);
            $location.path("/user");
        };

        $scope.logout = function() {
            $http.defaults.headers.common['Authorization'] = undefined;
            $location.path("/login");
        };
    }])
    .directive('eaLoginForm', [function() {
        return {
            restrict:   'E',
            template:   '<div id="ea_login_container" ng-controller="EALoginCtrl">' +
                        '<form id="ea_login_form" name="ea_login_form" novalidate>' +
                        '<input id="ea_login_email_field" class="ea_login_field" type="text" name="email" ng-model="email" placeholder="E-Mail"/>' +
                        '<br/>' +
                        '<input id="ea_login_password_field" class="ea_login_field" type="password" name="password" ng-model="password" placeholder="Password"/>' +
                        '<br/>' +
                        '<button class="ea_login_button" ng-click="login()">Login</button>' +
                        '</form>' +
                        '</div>',
            replace: true
        };
    }])
    .directive('eaLogoutLink', [function() {
        return {
            restrict: 'E',
            template: '<a id="ea-logout-link" ng-controller="EALoginCtrl" ng-click="logout()">Logout</a>',
            replace: true
        }
    }]);

angular.module('ea-base64-login', []).
    factory('EABase64Login', function() {
        var keyStr = 'ABCDEFGHIJKLMNOP' +
            'QRSTUVWXYZabcdef' +
            'ghijklmnopqrstuv' +
            'wxyz0123456789+/' +
            '=';

        return {
            encode: function (input) {
                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;

                do {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);

                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;

                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }

                    output = output +
                        keyStr.charAt(enc1) +
                        keyStr.charAt(enc2) +
                        keyStr.charAt(enc3) +
                        keyStr.charAt(enc4);
                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";
                } while (i < input.length);

                return output;
            },

            decode: function (input) {
                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;

                // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
                var base64test = /[^A-Za-z0-9\+\/\=]/g;
                if (base64test.exec(input)) {
                    alert("There were invalid base64 characters in the input text.\n" +
                        "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                        "Expect errors in decoding.");
                }
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

                do {
                    enc1 = keyStr.indexOf(input.charAt(i++));
                    enc2 = keyStr.indexOf(input.charAt(i++));
                    enc3 = keyStr.indexOf(input.charAt(i++));
                    enc4 = keyStr.indexOf(input.charAt(i++));

                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;

                    output = output + String.fromCharCode(chr1);

                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }

                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";

                } while (i < input.length);

                return output;
            }
        };
    });
})();

2
আপনার যদি কোনও নির্দেশ না দেয় তবে আপনার সত্যিকার অর্থে জেএসে ডোম ম্যানিপুলেশন করা থেকে দূরে থাকা উচিত। আপনি যদি স্রেফ আপনার যুক্তি সেট আপ করেন এবং তারপরে কোনও ক্লাস প্রয়োগ করতে এনজি-ক্লাস ব্যবহার করেন এবং সিএসএস অ্যানিমেশনটি ট্রিগার করেন আপনি পরে নিজেকে ধন্যবাদ জানাতে পারেন।
Askdesigners

7

আপনার app.js ফাইলটিতে:

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

      $rootScope.$on('$locationChangeStart', function(event, next, current) {
        if (!$rootScope.loggedUser == null) {
          $state.go('home');
        }    
      });
}])

4

কৌণিক-ইউআই-রাউটার দিয়ে অন্য ভিউতে পুনর্নির্দেশ করা সম্ভব । এই উদ্দেশ্যে, আমাদের পদ্ধতি আছে $state.go("target_view")। উদাহরণ স্বরূপ:

 ---- app.js -----

 var app = angular.module('myApp', ['ui.router']);

 app.config(function ($stateProvider, $urlRouterProvider) {

    // Otherwise
    $urlRouterProvider.otherwise("/");

    $stateProvider
            // Index will decide if redirects to Login or Dashboard view
            .state("index", {
                 url: ""
                 controller: 'index_controller'
              })
            .state('dashboard', {
                url: "/dashboard",
                controller: 'dashboard_controller',
                templateUrl: "views/dashboard.html"
              })
            .state('login', {
                url: "/login",
                controller: 'login_controller',
                templateUrl: "views/login.html"
              });
 });

 // Associate the $state variable with $rootScope in order to use it with any controller
 app.run(function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    });

 app.controller('index_controller', function ($scope, $log) {

    /* Check if the user is logged prior to use the next code */

    if (!isLoggedUser) {
        $log.log("user not logged, redirecting to Login view");
        // Redirect to Login view 
        $scope.$state.go("login");
    } else {
        // Redirect to dashboard view 
        $scope.$state.go("dashboard");
    }

 });

----- HTML -----

<!DOCTYPE html>
<html>
    <head>
        <title>My WebSite</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="MyContent">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="js/libs/angular.min.js" type="text/javascript"></script>
        <script src="js/libs/angular-ui-router.min.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>

    </head>
    <body ng-app="myApp">
        <div ui-view></div>
    </body>
</html>

3

আপনি যদি কৌণিক-ইউআই-রাউটারটি ব্যবহার করতে না চান তবে আপনার কন্ট্রোলারগুলি অ্যাসোরিয়েজেজেএসের মাধ্যমে অলসভাবে বোঝাতে চান, ইভেন্টের সাথে বেশ কয়েকটি সমস্যা রয়েছে $routeChangeStart আপনার কন্ট্রোলারদের রিকোয়ারিয়েজেএস মডিউলগুলি (অলস বোঝা) হিসাবে ব্যবহার করার সময় ।

$routeChangeStartট্রিগার হওয়ার আগে নিয়ামকটি লোড হবে তা আপনি নিশ্চিত করতে পারবেন না - বাস্তবে এটি লোড হবে না। এর অর্থ আপনি nextরুটের বৈশিষ্ট্যগুলিতে অ্যাক্সেস করতে পারবেন না localsবা $$routeকারণ তারা এখনও সেটআপ করেনি।
উদাহরণ:

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.when("/foo", {
        controller: "Foo",
        resolve: {
            controller: ["$q", function($q) {
                var deferred = $q.defer();
                require(["path/to/controller/Foo"], function(Foo) {
                    // now controller is loaded
                    deferred.resolve();
                });
                return deferred.promise;
            }]
        }
    });
}]);

app.run(["$rootScope", function($rootScope) {
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
        console.log(next.$$route, next.locals); // undefined, undefined
    });
}]);

এর অর্থ আপনি সেখানে অ্যাক্সেসের অধিকারগুলি পরীক্ষা করতে পারবেন না।

সমাধান:

যেমন নিয়ন্ত্রণের লোডিং সমাধানের মাধ্যমে সম্পন্ন হয়, আপনি নিজের অ্যাক্সেস নিয়ন্ত্রণ চেক দিয়েও এটি করতে পারেন:

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.when("/foo", {
        controller: "Foo",
        resolve: {
            controller: ["$q", function($q) {
                var deferred = $q.defer();
                require(["path/to/controller/Foo"], function(Foo) {
                    // now controller is loaded
                    deferred.resolve();
                });
                return deferred.promise;
            }],
            access: ["$q", function($q) {
                var deferred = $q.defer();
                if (/* some logic to determine access is granted */) {
                    deferred.resolve();
                } else {
                    deferred.reject("You have no access rights to go there");
                }
                return deferred.promise;
            }],
        }
    });
}]);

app.run(["$rootScope", function($rootScope) {
    $rootScope.$on("$routeChangeError", function(event, next, current, error) {
        console.log("Error: " + error); // "Error: You have no access rights to go there"
    });
}]);

এখানে নোট করুন যে ইভেন্টটি $routeChangeStartব্যবহার না করে আমি ব্যবহার করছি$routeChangeError


-4
    $routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController}).
 .when('/login', {templateUrl: 'partials/index.html', controller: IndexController})
 .otherwise({redirectTo: '/index'});

এটি একটি প্রাথমিক রুট কনফিগারেশন ... কনফিগার করা রুটে পুনঃনির্দেশের আগে আমরা কোথায় কোন শর্ত পরীক্ষা করছি ..?
টিজে
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.