angularjs - 如果用户登录 AngularJS,则重定向索引页面

标签 angularjs angular-routing

我试图改变用户在访问我的网站时看到的页面。如果他们是匿名的,他们应该看到注册页面。如果他们已经登录,他们应该会看到他们的仪表板。

我有一个服务,可以检查用户是否登录(例如检查 cookie),该服务在 Angular 服务加载时触发。我尝试使用 $routeProvider 进行重定向,但在初始化 $routeProvider 时尚未触发该服务,因此它始终认为用户未登录。

一旦加载了初始页面,我就可以轻松重定向,但我很难重定向加载的第一个页面。谁能就如何做到这一点提供建议?

最佳答案

请务必阅读答案下的评论。当我回答这个问题时,我没有考虑单元测试和设计。我只是在演示实现预期结果的多种方法之一

我认为在 Controller 或 app.config.run 下执行此操作的最佳方法。 在您的情况下,您应该创建另一个模块来检查用户登录状态。将用户登录状态检查模块注入(inject)到您的应用模块中。

这里是示例的链接,后跟 app.js 代码

http://plnkr.co/edit/dCdCEgLjLeGf82o1MttS

var login = angular.module('myLoginCheck', [])
  .factory('$logincheck', function () {
    return function (userid) {
      // Perform logical user logging. Check either 
      // by looking at cookies or make a call to server.
      if (userid > 0) return true;
      return false;
    };
  });

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

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/publicurl', {})
      .when('/loginurl', {})
      .when('/unauthorize', {})
      .otherwise({redirectTo: '/'});
  })
  .run(function ($logincheck, $location) {
    //console.log("Into run mode");
    console.log("Userid 5 is logged in: ", $logincheck(5));
    console.log("Userid 0  logged in: ", $logincheck(0));

    //now redirect to appropriate path based on login status
    if ($logincheck(0)) {
      //$location.path('/loginurl'); or          
    }
    else {
      //$location.path('/publicurl'); or 
    }
  });

app.controller('MainCtrl', function ($scope) {
  $scope.name = 'World';
});

关于angularjs - 如果用户登录 AngularJS,则重定向索引页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14657711/

相关文章:

javascript - 观察属性的 Angular Directive(指令)

javascript - 如何从数组中的数组中绘制 AngularJs 表?

angular - NGRX 流程和路由 - 组件被访问次数过多

javascript - AngularJS 中的基本 URL

javascript - 如何使用 Angular js 自定义文件内容

angularjs - Angular 1.x 中的 UI-Router v1.0+ $transitions 服务

javascript - AngularJs 指令和 $http 调用

angular - Angular中的嵌套路由

angular - 如何在 Angular 2的运行时动态更改templateUrl值

angular - typescript 导入导入angular2路由器错误