AngularJS 多视图应用中的登录认证
时间:2022-07-23
本文章向大家介绍AngularJS 多视图应用中的登录认证,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
AngularJS 多视图应用中的登录认证
在 AngularJS 的多视图应用中, 一般都有实现登录认证的需求, 最简单的解决方法是结合服务端认证, 做一个单独的登录页面, 登录完成之后再跳转回来, 这种方法当然可取, 不过就破坏了单页面应用 (SPA) 的体验, 追求完美的开发者肯定不会采用这种方法。
在 AngularJS 应用中, 都有一个唯一的变量 rootScope 当切换视图时, rootScope 会广播事件
angular
// 声明应用程序模块
.module('app', ['ngRoute'])
// 注册 Controller
.controller('HomeController', function ($scope) {})
.controller('LoginController', function ($scope) {})
/* 注册其它模块省略 */
// 配置路由
.config(function ($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
allowAnonymous: false
})
/* 其它路由配置省略 */
.when('/login', {
controller: 'LoginController',
templateUrl: 'loginView.html',
allowAnonymous: true
})
.otherwise({ redirectTo: '/home' });
})
// 应用启动时运行
.run(function ($location, $rootScope, $log, $route) {
// $rootScope 的 $routeChangeStart 事件
function onRouteChangeStart(event, next, current) {
// 如果下一个路由不允许匿名, 并且没有认证, 则重定向到 login 页面
if (!next.allowAnonymous && !$rootScope.currentUser) {
$log.log('Authentication required, redirect to login.');
var returnUrl = $location.url();
$log.log('return url is ' + returnUrl);
//
event.preventDefault();
$location.path('/login').search({ returnUrl: returnUrl });
}
}
// 监听 $rootScope 的 $routeChangeStart 事件
$rootScope.$on('$routeChangeStart', onRouteChangeStart);
});
这样, AngularJS 在开始切换视图时 ($routeChangeStart
) 会调用 (onRouteChangeStart
) 函数进行检查, 如果要切换的路由不允许匿名访问, 则会重定向到路由中定义的 /login
对应的视图。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法