javascript - Angular 限制对 View 的访问，除非有 cookie

Question

我有 Angular ui-router，除非 cookie 处于事件状态，否则我会限制对 View 的访问。

我在帖子中设置了 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 中的解析属性，只需在状态定义中添加字段解析，如果不满足条件，则将用户重定向到不同的状态(例如登录状态)

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);
  } 
})