javascript-Angular js / ui-router /限制用户手动导航到url(查看)

我花了整整一天的时间(业余程序员,而不是真正的程序员).我事先承认,问题在于我对角度的基本原理缺乏了解(以及与此相关的大多数编程工作).我对Web开发特别陌生,需要一些帮助.

无论如何,我有一个用于学习目的的模板,这就是全部.这是来自startangular.com的“ ani-theme”.我建立了一些基本的逻辑来验证用户身份(在电子邮件中输入“ aaa”,大声笑,记住,它只是为了学习).此代码可以正常工作,如果输入“ aaa”,则将触发路由器将您移至仪表板.

问题在于用户可以将仪表板的URL放在浏览器中然后转到那里.

我有一个名为“ authed”的变量,该变量在用户登录后设置为true,但是当他们手动键入URL时,似乎无法“有条件地”将用户路由到仪表板.我尝试了很多事情,但是没有运气.

经过5个小时的研究,我认为这是由于角度OR范围问题的异步性质所致.或两者.大概都不行. idk.

我看到了许多其他有关$stateChangeStart的帖子,但它超出了我的脑海.有人可以在这里向我指出正确的方向,还是可以用虚假的术语来解释这里发生的事情.我是说真的,我真的不知道那么多傻话,我不会受到侮辱.

APP.JS

var authed = false;
var done = false;
var yapp = angular
  .module('yapp', [
    'ui.router',
    'ngAnimate',
    'myAuth'
  ])
  .config(function($stateProvider, $urlRouterProvider) {


      $urlRouterProvider.when('/dashboard', '/dashboard/overview');
      $urlRouterProvider.otherwise('/login');

    $stateProvider
      .state('base', {
        abstract: true,
        url: '',
        templateUrl: 'views/base.html'
      })
      .state('login', {
        url: '/login',
        parent: 'base',
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      })
      .state('dashboard', {
        url: '/dashboard',
        parent: 'base',
        templateUrl: 'views/dashboard.html',
        controller: 'DashboardCtrl'
      })
      .state('overview', {
        url: '/overview',
        parent: 'dashboard',
        templateUrl: 'views/dashboard/overview.html'
      })
      .state('reports', {
        url: '/reports',
        parent: 'dashboard',
        templateUrl: 'views/dashboard/reports.html'
      });

  });

登录

angular.module('yapp')
  .controller('LoginCtrl', function($scope, $location, authFactory) {
      $scope.submit = function(emailp) {
        if(authFactory.checkAuth(emailp)) {
          $location.path('/dashboard');
        }else{
          alert("WRONG");
        }
      }
    });

AUTH.JS

var myAuth = angular.module('myAuth', [])
  .factory('authFactory', function(){
    var factory = {};
    factory.checkAuth = function(emailp){
      if(emailp == 'aaa') authed = true;
      return(authed);
    };
    return factory;
  });

重要说明

我喜欢建议和帮助,所以,如果您看到我在做的其他事情只是看起来很荒谬,请给我打电话.这对我有很大帮助.

————————————————

编辑编辑编辑编辑编辑

感谢您到目前为止的回答！我将尝试实现@swestner的答案,一旦它起作用,我将研究“为什么”部分,以便我能真正理解.

对于这个问题,我确实有另一个问题需要澄清,这样我就可以更好地理解为什么我的其他方法不起作用.我很好奇,因为这是一种奇怪的行为.

因此,您看到我的authed变量在app.js中声明,然后在auth.js工厂中根据用户’emailp’将其设置为true或false.
我在app.js中添加了一些逻辑,说“如果authed为true,则使用这些route命令,否则使用这些.

例：

console.log(authed) //this actually does print the correct value...
if(authed) {  //however this doesnt work!
  $urlRouterProvider.when('/dashboard', '/dashboard/overview');
  $urlRouterProvider.otherwise('/login');
}else{
  $urlRouterProvider.when('/dashboard', '/login');
  $urlRouterProvider.otherwise('/login');
}

我可以打印正确的值,但是条件始终是正确的.

但是,如果我在条件语句之前声明变量authed2 RIGHT,它将正常工作！

var authed2 = true;

console.log(authed + " #1");
console.log(authed2 + ' #2');

if(authed2) {
  $urlRouterProvider.when('/dashboard', '/dashboard/overview');
  $urlRouterProvider.otherwise('/login');
}else{
  $urlRouterProvider.when('/dashboard', '/login');
  $urlRouterProvider.otherwise('/login');
}

程序知道两个值都为真,我什至可以在条件条件之前将它们都打印出来,但是当我使用authed(在其他地方设置并声明)时,条件条件不起作用(即使它似乎知道答案).

这让我感到困惑,我不得不在这里错过一些背景行为.

解决方法:

$stateChangeStart事件是处理此事件的适当位置.当您尝试导航到URL时,将触发此事件.此时,您可以检查用户是否已通过身份验证,如果未通过身份验证,则将其退回登录.

您将像这样挂接事件：

angular
  .module('yapp')
  .run(function ($rootScope, $state, authFactory) {
    $rootScope.$on('$stateChangeStart', function () {
      if(!authFactory.isAuthed()){
        $state.go('login')
      }
    })
  });

并更新您的身份验证工厂以具有isAuthed方法.

var myAuth = angular.module('myAuth', [])
  .factory('authFactory', function () {
    var factory = {};
    factory.checkAuth = function (emailp) {
      if (emailp == 'aaa') authed = true;
      return (authed);
    };

    factory.isAuthed = function () {
      return authed;
    }
    return factory;
  });

标签：angularjs,angular-ui-router,authorization,router,javascript
来源： https://codeday.me/bug/20191027/1948122.html