Angularjs :$routeChangeStart event

Angularjs :$routeChangeStart event

本文关键字：event routeChangeStart Angularjs      更新时间：2023-09-26

我是angularjs的新手，如何检查用户是否登录？我正在使用sailsjs后端和angularjs前端

module.run(function ($location, $rootScope) {
      $rootScope.$on("$routeChangeStart", function (event, next, current) {
      });
   })

signin.js

.controller('SigninCtrl', function ($scope,$location,User,$http) {             

    $scope.signin = function(){
    var data={ email:$scope.email,password:$scope.password}
       var user=User.signin(data);
        //console.log(typeof user);
     user.success(function (data) {
                    //console.log("token signin",data);
                    var token=data.token;
                localStorage.setItem('id_token', token);
                    $location.path("/todo");
               })
               .error(function (data) {
                    //Do whatever is needed
                 //console.log(data);
               });  
        }   
  });

服务：User.jssignin:函数（数据）｛

            return $sails.post('/api/auth',data);
        },

好吧，我做了一些相当简单的事情。请参阅此plnkr了解更多详细信息。

userHttpService通常会包装$http，但由于我没有真正达到的端点，所以我使用$q库来伪造承诺。

routeConfig是一个提供程序，您可以在配置时设置它来配置允许您访问的路由。如果您使用类似ui路由器的东西，您可以使用路由设置中的settings对象来做一些更优雅的事情。如果你想看到更优雅、更高级的东西，可以看看这个回购。

配置如下：

app.config(function($routeProvider, $locationProvider, routeConfigProvider) {
  $routeProvider.when('/home', { template: '<h2>Home</h2><p>Please do something</p>' })
  $routeProvider.when('/login', { controller: 'LoginController', template: '<h2>Login</h2><div><p><span>Name:</span><input type="text" ng-model="name" /></p><p><span>Password:</span><input type="password" ng-model="password" /></p></div><div><p><button type="submit" ng-click="login()">Login</button></p></div><div><p>{{error}}</p></div>' });
  $routeProvider.when('/profile', { controller: 'ProfileController', template: '<h2>Profile</h2><div><p><span>Name:</span>{{name}}</p></div>' });
  $routeProvider.otherwise('/home');
  $locationProvider.html5Mode(true);

  routeConfigProvider.addRouteWhenLoggedIn('/profile');
  routeConfigProvider.addRouteWhenLoggedIn('/home');
  routeConfigProvider.addRouteWhenLoggedOut('/home');
  routeConfigProvider.addRouteWhenLoggedOut('/login');
});

我只是把我所有的模板都捆绑在那里，以便于使用。我拉上我的routeConfigProvider（注意，当你把它命名为.provider('routeConfig', ...时，你不会添加Provider，angular会为你添加）。

然后，我开始将路线添加到不同的表中，一个表用于登录时允许导航到的路线，另一个表则用于注销时允许导航的路线。

以下是您对路线导航的实际操作。

app.run(function ($rootScope, routeConfig, userService) {
  $rootScope.$on('$routeChangeStart', function (e, c, p) {
    var topath = c.$$route.originalPath;
    if (userService.isLoggedIn()) {
      if (!routeConfig.isAllowedWhenLoggedIn(topath)){
        e.preventDefault();
        // you can use $location.path to redirect if you wish
      }
    } else {
      if (!routeConfig.isAllowedWhenLoggedOut(topath)){
        e.preventDefault();
        // you can use $location.path to redirect if you wish
      }
    }
  });
});

它非常简单，它使用userService（记住它不是userHttpService，所以它负责分发用户特定的东西），并询问用户是否登录。然后它会查找任一路由表，看看是否允许他们导航到该路由。

e.PreventDefault()是防止导航的方法。

相关文章：