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

2019-10-27 23:33:39 阅读：252 来源： 互联网

标签：angularjs angular-ui-router authorization router javascript

我花了整整一天的时间(业余程序员,而不是真正的程序员).我事先承认,问题在于我对角度的基本原理缺乏了解(以及与此相关的大多数编程工作).我对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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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