个人中心
gpt4 book ai didi

javascript - 用户界面路由器 : How should you prevent toState from showing while you're checking authorization?

转载 作者：行者123 更新时间：2023-11-29 14:45:51 28 4
gpt4 key购买 nike

编辑:提议的使用 resolve 的方法对我不起作用。 $stateChangeStart 事件似乎发生在解决问题之前。 Plunker .

我正在使用 $on($stateChangeStart) 对路由进行身份验证。我这样做的方式存在一个问题:如果用户试图访问他无权查看的状态，该状态将在我的代码重定向他之前短暂显示。

要解决这个问题，最好的方法似乎是使用 event.preventDefault() + $state.go(toState.name, {}, { notify: false }) ，但是 { notify: false } 有一个 known bug .

我不确定处理这种情况的好方法是什么。我唯一的想法是切换 body 的 display 属性，但我不喜欢这个解决方案。

  1. body 上的“闪烁”display: none -> display: block。
  2. 隐藏和重新显示这么大一部分 DOM 的成本很高(或者是吗？)。

应该如何处理这种情况？

Plunker 

angular
  .module('app', ['ui.router'])
  .config(config)
  .run(run)
;

function config($locationProvider, $urlRouterProvider, $stateProvider) {
  $locationProvider.html5Mode(true);
  $urlRouterProvider.otherwise('/');
  
  $stateProvider
    .state('home', {
      url: '/',
      template: '<p>home</p>'
    })
    .state('one', {
      url: '/one',
      template: '<p>one</p>',
      authenticate: true
    })
    .state('two', {
      url: '/two',
      template: '<p>two</p>'
    })
  ;
}

function run($rootScope, $state, $timeout) {
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
    if (toState.authenticate) {
      // event.preventDefault();
      angular.element(document.body).css('display', 'none');
      if (isAuthenticated(false)) {
        // $state.go(toState.name, {}, { notify: false });
        angular.element(document.body).css('display', 'block');
      }
      else {
        $timeout(function() {
          $state.go('two');
          angular.element(document.body).css('display', 'block');
        }, 2000);
      }
    }
  });
}

function isAuthenticated(hardcode) {
  return hardcode; 
}
<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <script data-require="ui-router@0.2.11" data-semver="0.2.11" src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <base href='/'>
  </head>

  <body>
    <ul>
      <li><a ui-sref='home'>home</a></li>
      <li><a ui-sref='one'>state one</a></li>
      <li><a ui-sref='two'>state two</a></li>
    </ul>
    
    <div ui-view></div>
  </body>

</html>

最佳答案

您的 if 缺少 !。

阻止事件解决了问题，不允许路由加载

function run($rootScope, $state, $timeout) {
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
    if (toState.authenticate) {
      if (!isAuthenticated()) {
        event.preventDefault();
        // can redirect if needed here
      }
    }
  });
}

function isAuthenticated() {
  return false; 
}

DEMO

关于javascript - 用户界面路由器 : How should you prevent toState from showing while you're checking authorization?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33059308/

28 4 0
文章推荐： javascript - 使用/不使用原型(prototype)的 JS 继承
文章推荐： python - 如何自定义 Django 模型的 python 端？
文章推荐： php - 本地 php-mysql 安装无法连接到远程数据库？
文章推荐： javascript - 如何检测单个控件的按键事件而不是组合键？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com