angularjs - 您如何使用 ui-router 保护/处理经过身份验证的路由？

Question

刚开始使用 Angular，我正在努力尽快学习。我对 SPA 比较陌生，所以请耐心等待，如果我想做的事情不可行，请随时告诉我。我目前遇到的问题是，在使用 ui-router 时如何保护我的路由？

我想做什么？

有些路由我不想让未登录的用户访问。例如，/home 和 /login 对匿名 用户是可以的。
/dashboard 应该只用于那些登录的用户。

我想要这样，如果用户将来在未登录的情况下尝试访问/dashboard，他们将无法访问。

我已经尝试过什么？

我尝试使用此处的 Angular 权限模块:https://github.com/Narzerus/angular-permission问题是..我不太确定如何使用它(也不知道我是否正确使用它)。

目前发生了什么？

在我的登录 Controller 中，一旦用户提交了他们的用户名和密码，它就会向我的网络服务器发送一个/POST。一旦它得到结果，(不管它是什么时候)我已经把它重定向到/dashboard。

现在/dashboard 应该没有任何内容，因为没有设置权限，但我(错误地)被允许查看仪表板。我可以 (1) 在未经许可的情况下成功重定向到仪表板，以及 (2) 在未经许可的情况下访问/dashboard。

我的代码现在是什么样的？

controllers.js

var controllers = angular.module('controllers',[])
// Login Controller -- This handles the login page that the user can enter
// enter his username & password.
controllers.controller('loginController', function($scope, $state,$location, LoginService){
    $scope.email = "";
    $scope.password = ""

    $scope.login = function(){
        var data = ({email:"test", password: "ayylmao"})
        LoginService.login(data).then(function(res){
            console.log(res);
        })
        .catch(function(err){
            console.log("ERROR!");
            console.log(err);
            $state.go('dashboard')
        })
    }
})

app.js

//Definition: The parent module
var myApp = angular.module('clipboardApp', ['services','controllers', 'permission','ui.router']);

//Code below taken from the angular-permission docs.
angular
  .module('fooModule', ['permission', 'user'])
  .run(function (PermissionStore, User) {
    // Define anonymous permission)
    PermissionStore
      .definePermission('anonymous', function (stateParams) {
      // If the returned value is *truthy* then the user has the permission, otherwise they don't.
        //True indicates anonymous.
        //Always returning true to indicate that it's anonymous
        return true;
      });
  });



//This will be serving as the router.
myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    //By default go
    $urlRouterProvider.otherwise('/home');

    //Views are
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html',
        })
        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html',
            controller:  'loginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'views/dashboard.html',
            controller: 'dashboardController',
            data: {
              permissions: {
                except: ['anonymous'],
                redirectTo: 'login'
              }
            }
          });

});

Answer 1

这是一个使用安全路由的工作示例。在此示例中，任何状态都以 app 开头。将通过 auth 拦截器。 $transitions.onBefore 钩子(Hook)可以使用如下来满足您的要求。

.run(($transitions, $state, $injector) => {
    $transitions.onBefore({
      to: 'app.**'
    }, () => {
      const $window = $injector.get('$window');
      if (!$window.sessionStorage.getItem('user')) {
        return $state.target('login', $state.transition.params());
      }
      return true
    });
  });

https://plnkr.co/edit/ZCN2hB34mMEmBJulyaAJ?p=info