angularjs - Angular - 同じ Url "/" ですが、ユーザーのログイン状態に基づいて異なるテンプレートを使用します

Question

2 つの異なるテンプレートを使用しようとしています。1 つはログアウトしたユーザーがビジネスについて説明するランディング ページで、もう 1 つはユーザーがログインしている場合のダッシュボード ページです。

UIルーターでこれを行う方法について、この他のスタックを読みました。ngRoute を使用してこのようなことを行うためのベスト プラクティスを知りたいですか?

以下の設定方法は、「/frontdesk」がダッシュボードで、「/」がログアウトしたユーザーのランディング ページです。しかし！ユーザーがダッシュボードを使用している場合でも、ログアウトしてランディング ページに送信された場合でも、URL を同じにしたい! 「/frontdesk」は不要です。IndexController と FrontdeskController には「/」が必要です。

これが私のルーティングJSです。

(function () {
      'use strict';

    angular
      .module('resonanceinn.routes')
      .config(config);

    config.$inject = ['$routeProvider'];

    function config($routeProvider) {
      $routeProvider
        .when('/', { // This is the landing Page
            controller: 'IndexController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/layout/index.html'
        })
        .when('/frontdesk', { //This is logged in user that I want to become '/' as well
            controller: 'FrontdeskController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/frontdesk/frontdesk.html'
        })
        .when('/register', {
            controller: 'RegisterController', 
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/authentication/register.html'
        })
        .when('/login', {
            controller: 'LoginController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/authentication/login.html '
        })
        .when('/:username', {
            controller: 'ProfileController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/profiles/profile.html'
        })
        .when('/:username/settings', {
            controller: 'ProfileSettingsController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/profiles/settings.html'
     }).otherwise('/');
   }
})();

解決！

皆様、ご回答ありがとうございます。

より良い解決策を提供してくれた@ThibaudLに感謝します。

これは私がそれをやった方法です：

Routes.js 内

 .when('/', {
        controller: 'MainController',
        controllerAs: 'vm',
        templateUrl: '/static/javascripts/layout/Main.html'

Main.html

<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div>
<div ng-include="" src="'/static/javascripts/frontdesk/frontdesk.html'" ng-if="!auth"></div>

MainController.js

(function () {
  'use strict';

  angular
    .module('resonanceinn.layout.controllers')
    .controller('StartController', StartController);

  StartController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];

  function StartController($scope, $route, $routeParams, $location, Authentication) {

      $scope.auth = Authentication.isAuthenticated();
  }
})();

したがって、ユーザーが認証されている場合は、テンプレートをユーザー ダッシュボードに切り替えるだけです。各テンプレートに個別のコントローラーがあるように、各テンプレートに ng-controller を使用して新しい div を追加しました。

Answer 1

$routeProvider で $locationProvider を注入する

config.$inject = ['$locationProvider'];

それから

function config($routeProvider, $locationProvider ) {
  $routeProvider
    .when('/', {
        controller: 'IndexController',
        controllerAs: 'vm',
        template: " "
    })

...

そのテンプレートが templateUrl ではなく、テンプレートが " " であることに注意してください "" だけに注意してください

次に、インデックスコントローラーで

.controller('IndexController', function($scope, $route, $routeParams, $location) {
 if ($scope.user.loggedIn) $location.path('/:user'); else $location.path('/:visitor');})

「/」と同じパスですが、loggedIn ユーザーの場合は /:user、anonymous の場合は /:visitor であることに注意してください

Answer 2

resolve プロパティを使用して、ユーザーがログインしているかどうかを確認できます。

$routeProvider
    .when('/somepage' ,{
    templateUrl: "templates/template.html",
    resolve:{
        "check":function($location){  
            if('Your Condition'){
                //Do something
            }else{
                $location.path('/');    //redirect user to home.
                alert("You don't have access here");
            }
        }
    }
    })

Answer 3

私がすることは：

Main.html

<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div>

MainController.js

(function () {
  'use strict';

  angular
    .module('App.layout.controllers')
    .controller('MainController', MainController);

  MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];

  function MainController($scope, $route, $routeParams, $location, Authentication) { 

      $scope.auth = Authentication; 
   });
  }
})();

Answer 4

できることはいくつかあります。最も簡単なのは、FrontdeskController の先頭でログイン状態を確認し、ログインしていない場合はホームページに移動することです。

ルートに変数を追加して、前の回答のようにチェックすることもできます。

二重状態のテンプレート ページを作成するなど、実行できる極端なケースは他にもありますが、これは非常に悪い習慣だと思いますが、これも良いことではありません。

これが役に立ったことを願っています

Answer 5

For templateUrl, you can use a function like,

templateUrl : function(parameter) {
   if(loggedin) {
       return '/static/javascripts/layout/index.html';
   } else {
       return 'logged out page';
   }
}

You can read $routeProvider,

templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.

If templateUrl is a function, it will be called with the following parameters:

{Array.< Object >} - route parameters extracted from the current $location.path() by applying the current route

Answer 6

最初の試み

.

Routes.js 内

 .when('/', {
        controller: 'MainController',
        controllerAs: 'vm',
        templateUrl: '/static/javascripts/layout/Main.html'

Main.html

<div ng-include="mainTemplate"></div>

MainController.js

(function () {
  'use strict';

  angular
    .module('App.layout.controllers')
    .controller('MainController', MainController);

  MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication'];

  function MainController($scope, $route, $routeParams, $location, Authentication) { 

      $scope.$watch(function($scope) {
          return $scope.mainTemplate = Authentication.isAuthenticated() ? '/static/javascripts/layout/index.html' : '/static/javascripts/frontdesk/frontdesk.html';
   });
  }
})();

したがって、ユーザーが認証されている場合は、テンプレートをユーザー ダッシュボードに切り替えるだけです。各テンプレートに個別のコントローラーがあるように、各テンプレートに ng-controller を使用して新しい div を追加しました。