AngularJS 页面权限控制

基于ui-router路由钩子实现，慢慢看，最后有代码

1、全局钩子

//自行研究····

2、resolve钩子

3、onEnter，不推荐，不推荐，不推荐，为什么呢？

(1)老版本与新版本功能不一致

(2)此时resolve已经执行过了，强迫症啊，竟然有比我还快的！

测试文件

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>angular-demo</title>
</head>
<body>
<ui-view/>
<!-- <script src="./lib/angular.min.js"></script> -->
<!-- <script src="./lib/angular-ui-router.min.js"></script> -->
<!-- <script src="https://cdn.staticfile.org/angular.js/1.3.13/angular.js"></script> -->
<script src="https://cdn.staticfile.org/angular.js/1.5.0/angular.js"></script>
<script src="https://cdn.staticfile.org/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>
	const app = angular.module('app', ['ui.router']);
	app
		.constant('IS_ADMIN', false)
		.config(function ($stateProvider, $urlRouterProvider) {
			$urlRouterProvider.otherwise('/student');
			$stateProvider
				.state('admin', {
					url: '/admin',
					template: 'admin dashboard<br/><button ui-sref="student">student</button>',
					controller: function () {
					},
					// onEnter($state, IS_ADMIN) {
					// 	if (!IS_ADMIN) {
					// 		setTimeout(() => {
					// 			$state.go('student'); //防止url跳转,如果当前已经在student页面,也不会影响...
					// 			console.log('不是管理员');
					// 		});
					// 	}
					// 	return IS_ADMIN;//注意低版本返回值无效，例如0.2.15
					// },
					resolve: {
						[Date.now()]() {
							console.log('在onEnter之前执行');
						},
						//haha会成为依赖，可以注入到controller，如果不需要可以乱写一个，例如上一行。。
						haha($state, IS_ADMIN) {
							return new Promise((yes, no) => {
								if (!IS_ADMIN) {
									setTimeout(() => {
										$state.go('student'); //防止url跳转,如果当前已经在student页面,也不会影响...
										console.log('不是管理员');
									});
								}
								(IS_ADMIN ? yes : no)();
							});
						},
					},
				})
				.state('student', {
					url: '/student?id&name&age&sex',
					template: '<button ui-sref="admin">admin</button><br/><button ng-click="search()">加载参数</button><button ng-click="clean()">清除参数</button>',
					controller: function ($scope, $state) {
						$scope.search = function () {
							$state.go('.', {
								id: 111,
								name: 222,
								age: 333,
								sex: 444,
							});
						};
						$scope.clean = function () {
							$state.go('.', {
								id: 333
							}, {
								inherit: false
							});
						};
					},
				})
		});
</script>
</body>
</html>

AngularJS 页面权限控制

猜你喜欢