基于AngularJS中的登录状态,具有不同模板的相同URL('/')

Question

我想知道最佳实践,如何在AngularJS中设置路由和模板以向访问者显示不同的前端和登录区域,然后在同一个基本URL('/')上显示登录用户的仪表板.

这两页在结构上完全不同,也需要不同的资产.

为网站的两个部分设置两个不同的应用程序是否更好,但是我如何管理两个部分之间的会话？

或者更好的做法是在主体标签之间没有任何内容的"空"布局,将不同的模板加载到其中,并为前部和前板部分制作单独的路由？

我正在寻找类似Facebook登录的方式.登录后留在根域.

我花了我的下午谷歌搜索和搜索,但没有找到任何指南.任何关于你如何在AngularJS中进行这种分离的想法都会非常受欢迎.

Answer 1

Martin的答案很好,但我宁愿用ui-router模块解决问题:

1. 创建三个状态:root,dashboard和landing.
2. 使用root状态捕获URL 并重定向到dashboard或landing取决于授权状态.
3. dashboard并且landing将controller和templateUrl在一个地方与其他应用程序的状态,这是很好的一起定义.

代码示例:

angular
  .module("app", ["ui.router"])
  .value("user", {
    name: "Bob",
    id: 1,
    loggedIn: true
  })
  .config(function($stateProvider) {
    $stateProvider
      .state("root", {
        url: "",
        template: "<section ui-view></section>",
        controller: function($state, user) {
          if ($state.is("root")) $state.go(user.loggedIn ? "dashboard" : "landing");
        }
      })
      .state("landing", {
        templateUrl: "landing.html",
        controller: "LandingCtrl"
      })
      .state("dashboard", {
        templateUrl: "dashboard.html",
        controller: "DashboardCtrl"
      });
  })
  .controller("DashboardCtrl", function($scope, user, $state) {
    $scope.logout = function() {
      user.loggedIn = false;
      $state.go("root");
    }
  })
  .controller("LandingCtrl", function($scope, user, $state) {
    $scope.login = function() {
      user.loggedIn = true;
      $state.go("root");
    }
  })

关于Plunker的完整示例.

Answer 2

您可以使用相同的主模板,包括不同的部分,具体取决于用户是否登录.

<ng-include=" 'views/loggedout.html' " ng-if="!loggedIn"></ng-include>
<ng-include=" 'views/loggedin.html' " ng-if="loggedIn"></ng-include>