Angular 限制对视图的访问，除非有 cookie

Question

我有 angular ui-router 并且我可以限制对视图的访问，除非 cookie 处于活动状态。

我在一个帖子中设置了我的 cookie，我将 cookie 设置为用户的电子邮件地址。

我知道如果用户有 cookie 用户名，我希望只允许用户查看。

我该怎么做？

设置 cookie

 FirstModule.controller('LoginController', function ($scope, $http, $cookies, $location) {
    $scope.sometext = {};

    $scope.LoginForm = function () {
        var data = {
            LoginEmail: $scope.sometext.LoginEmail
        };

        $http({
            url: 'http://localhost:8080/back-end/controller',
            method: "POST",
            data: data,
            headers: {'Content-Type': 'application/json'}

        }).then(function (response) {

            if (response.status === 200)
            //     $scope.sometext = "You are a valid member, please proceed to Mock Up Maker";
            $cookies.put('UserName', $scope.sometext.LoginEmail);
            $location.path('/download');
            // console.log($cookies);
        }).catch(function (response) {
            if (response.status === 400)
                $scope.sometext = "Hmm, it seems you are not registered, try again or register";
            else if (response.status === 404)
                $scope.sometext = "this is non a valid email address, please check email";
            else if (response.status === 500)
                $scope.sometext = "No API connection. Server side fail ";

            else $scope.sometext = "Server connection error, give it a second to establish connection then try again";
        });
    }
});

路由器

FirstModule.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

    // route to show our basic form (/form)
        .state('form', {
            url: '/form',
            templateUrl: 'views/form.html',
            controller: 'formController'
        })

        // nested states
        // each of these sections will have their own view
        // url will be nested (/form/signup)
        .state('form.signup', {
            url: '/signup',
            templateUrl: 'views/form-signup.html'
        })

        // url will be /form/select
        .state('form.select', {
            url: '/select',
            templateUrl: 'views/form-select.html'
        })

        // url will be /form/type
        .state('form.type', {
            url: '/type',
            templateUrl: 'views/form-type.html'
        })


    // catch all route
    // send users to the form page
    $urlRouterProvider.otherwise('/form/signup');
});

Answer 1

您可以使用 ui-router 中的 resolve 属性，只需在状态定义中添加字段 resolve，如果不满足条件，则将用户重定向到不同的状态（例如登录状态）

state('user', {
  url: '/',
  templateUrl: 'UserView.html',
  controller: 'UserViewController',
  resolve: {
    check: function($q, $cookies) {
      if ($cookies.get('UserName')){ //cookie to check
        return $q.resolve({});
      } else{
        return $q.reject({redirectState: 'loginState'}); 
      }
    }
  }
});

然后添加一个错误处理程序来检测任何错误

$rootScope.$on('$stateChangeError', function(evt, to, toParams, from, fromParams, error) {
  if (error.redirectState) {
    $state.go(error.redirectState);
  } 
})

Answer 2

Karim 给出的答案很好，应该可以正常工作。然而，这就像在流程的第二步采取行动。

处理此问题的最佳方法是仅在用户设置了该 cookie 时为用户提供导航到该 URL 的方法。您可以禁用链接或完全隐藏它。 IMO，这是一种更好的方法。

我宁愿以两种方式实现它以使我的应用程序健壮。这意味着，禁用/删除链接/按钮将完全阻止用户访问该链接。 Router-Resolve 将保护 智能用户，他们可以复制粘贴链接或在浏览器上按 Enter/F5。 :)