Angular - тот же Url "/", но с разными шаблонами, основанными на статусе пользователя, зарегистрированного в статусе

Я пытаюсь создать два разных шаблона. Одна из них - целевая страница для зарегистрированных пользователей, описывающих бизнес и другую страницу панели мониторинга, если пользователь вошел в систему.

Я прочитал этот другой стек о том, как это сделать с помощью 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();
  }
})();

Итак, теперь, если пользователь аутентифицирован, он просто переключает шаблоны на панель пользователей. Я добавил новый div с ng-контроллером для каждого шаблона, чтобы каждый шаблон имел свои отдельные контроллеры.

Ответ 1

Что бы я сделал:

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

Ответ 2

Добавьте другое свойство, например isGuest: true

.when('/', {
        controller: 'IndexController',
        controllerAs: 'vm',
        templateUrl: '/static/javascripts/layout/index.html',
        isGuest: true
})
 .... ...............

app.run(function($rootScope, $state, Session) {
 $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
  if (toState.isGuest == true && Session.isAuthenticated()) {
   // User isn’t authenticated
   // do redirection to guest user
    event.preventDefault();
  }

  if (toState.authentication == true && !Session.isAuthenticated()) {
    // do redirection to loggedin user 
    event.preventDefault();
   }
 });
});

Вы можете написать свой собственный сервис Session,

Session.isAuthenticated()//возвращает true или false на основе того, является ли пользователь гостевой или loggedin

Ответ 3

Вы можете использовать свойство разрешения, чтобы проверить, зарегистрирован ли пользователь.

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

Ответ 4

Ввести $locationProvider с помощью $routeProvider

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

то

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

...

обратите внимание на свой шаблон not templateUrl, также шаблон "просто отметьте" "

затем в вашем указательном контроллере

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

обратите внимание на тот же путь, что и '/', но /: пользователь для пользователей loggedIn и /: посетитель для анонимного

Ответ 5

есть несколько вещей, которые вы можете сделать, самое простое, проверяя статус вошедшего в начале вашего FrontdeskController и переходите на домашнюю страницу, если вы не вошли в систему.

вы также можете добавить переменные на маршруте и проверить их как в предыдущем ответе.

есть более экстремальные случаи, которые вы можете сделать, и я считаю, что это очень плохая практика, например, создание страницы шаблонов с двойным состоянием, но опять же, это не очень хорошо.

Я надеюсь, что это помогло

Ответ 6

Для templateUrl вы можете использовать такую функцию, как

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

Вы можете читать $routeProvider,

templateUrl - {string = | function() =} - путь или функция, которая возвращает путь к шаблону html, который должен использоваться ngView.

Если templateUrl является функцией, он будет вызываться со следующими параметрами:

{Array & л.; Object > } - параметры маршрута, извлеченные из текущего $location.path(), путем применения текущего маршрута

Ответ 7

Здесь полное решение:

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'IndexController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/layout/index.html'
        })
        .when('/frontdesk', {
            controller: 'FrontdeskController',
            controllerAs: 'vm',
            templateUrl: '/static/javascripts/frontdesk/frontdesk.html',
            requireLogin: true
        });
});

app.factory('authService', function () {
    var service = {
        isAuthenticated: false,
        loginPageUrl: '/login'
    };

    return service;
});

app.run(function ($rootScope, $location, authService) {
    $rootScope.$on('$routeChangeStart', function (event, next) {
        if (angular.isDefined(next) && next !== null && angular.isDefined(next.requireLogin)) {
            if (next.requireLogin === true && !authService.isAuthenticated) {
                event.preventDefault();
                $location.path(authService.loginPageUrl);
            }
        }
    });
});

Ответ 8

Первая попытка

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