Question

我是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.js signin：function（data）{

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

Answer 1

是的，我做了一些相当简单的事情。有关详细信息，请参阅此plnkr。

userHttpService通常会包裹$http，但由于我还没有获得一个端点来实际点击我使用$q库伪造一个承诺。

routeConfig是一个提供程序，您可以在配置时设置该程序包以配置您允许访问的路由。如果您使用类似ui router的内容，则可以使用路由设置中的settings对象执行更优雅的操作。如果您想看到更优雅和更高级的内容，请查看此repo。

配置如下：

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时，不要添加.provider('routeConfig', ...，而角度就是为您做的。）

然后我开始向不同的表添加路由，一个表用于您在登录时可以导航到的路由，另一个表用于您在＃39时可以导航到的路由;退出。

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

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()是您阻止导航的方式。

Angularjs：$ routeChangeStart事件

1 个答案: