Javascript 除非有cookie，否则限制对视图的访问

我有一个angular ui路由器，我需要限制对视图的访问，除非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');
});

---

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

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

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

---

卡里姆给出的答案很好，应该很有效。然而，这就像在流程的第二步采取行动

处理此问题的最佳方法是，仅当用户设置了cookie时，才为用户提供导航到此URL的方法。您可以禁用链接或完全隐藏链接。在国际海事组织，这是一个更好的办法

---

我宁愿用两种方式实现它，以使我的应用程序健壮。这意味着，禁用/删除链接/按钮将阻止用户访问链接。路由器解析将防止智能用户复制粘贴链接或在浏览器上按enter/F5键。：）

在我之前到达那里；但这绝对是解决问题的方法。请查看下面我的评论。请修复代码。解析器函数需要注入

$q

。使用

$q.resolve

和

$q.reject

而不是

$q.defer

。如果你指的是括号，是的，它丢失了很好是的，谢谢，我正在检查并尝试让它工作，我会接受你的答案谢谢我不完全理解你的解决方案，但事实上，我认为提供一个解决方案是一个非常直接的方法，angular在angular 2和4（使用canAcrivate钩子）中保持了这种麦加主义，如果他与状态有直接联系，他总是可以通过检查cookie来向Dom隐藏它。（1） 如果您通过锚点或按钮导航到此链接，则仅当用户拥有cookie时，该链接/按钮才可见/启用。这是对用户的第一道防线和反馈。（2） 即使用户看不到此链接，用户也可以通过键入/粘贴此URL，或在浏览器中访问链接，刷新很久以前打开的页面等其他方式接近它们。路由器解析将保护您免受此类用户的攻击。天气转晴了吗？如果没有，我将编辑我的答案更详细。

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