AngularJs基於角色的前端存取控制的實現
因为后端访问控制的经验比较丰富,所以这里只记录了前端访问控制的实现。请注意,前端最多只能做到显示控制!并不能保证安全,所以后端是一定要做访问控制的!
基于角色的访问控制需要做到两个层面的访问控制:
控制页面路由的跳转,没有权限的用户不能跳转到指定url
页面元素的显示控制,没有对应权限的用户不能看到该元素
但在此之前,我们还有一项重要的事要做。
存储用户信息
首先我们要做的,并不是和访问控制有关的事,首先我们要保存好用户信息。包括用户的基本信息,如用户名、真实姓名;以及用户角色。下面是数据结构:
user = {
username:"",
realname:"",
role:""
}
存储的时候就将整个user存储,但存在哪里呢?考虑到必须在任何页面都可以访问到,第一反应是存储到rootScope中,但我们应该尽量避免使用rootScope;除此之外,我们可以存储在顶级的controller或者是全局的constant中,这两种解决方案都可以,但它们的问题就是一旦页面刷新,就不管用了($rootScope也一样)。考虑到user这个变量的生命周期应该要与session相同,所以,我使用了SessionStorage。
在创建controller时,需要加入$sessionStorage:
app.controller('controller',['$sessionStorage', function($sessionStorage){}]);
在登录成功后,将user存储到SessionStorage中:
$sessionStorage.USER = user;
好了,之后通过$sessionStorage就可以获取到用户信息了。
user = $sessionStorage.USER;
控制页面路由的跳转
下面我们开始实现第一点:控制页面路由的跳转。
要做到第一点比较容易,Angular路由改变时会触发$stateChangeStart事件(我用的是stateProvider,所以监听stateChangeStart,如果是用的route或是location,应该监听它们对应的事件),监听此事件,在里面根据访问的url以及用户角色进行权限判断,比如登录的判断就可以在里面做,访问那个url需要登录就直接跳转到登录界面。
首先先写一个auth服务,用于权限认证:
/** * 基于角色的访问控制 */ App.service("auth", ["$http","$sessionStorage", function($http, $sessionStorage){ var roles = []; // 从后端数据库获取的角色表 // 从后端获取的角色权限Url映射表,结构为{"role":["/page1", "/page2"……]} var urlPermissions = {}; // 去后端获取 (function(){ // 此处为测试方便,直接赋值了,下面也仅以示例为目的,尽量简单了 roles = ["admin", "user"] urlPermissions = { // 管理员可以访问所用页面 "admin":["*"], // 普通用户可以访问page路径下的所有界面(登录、注册等页面)以及系统主页 "user":["page.*", "app.index", "app.detail"] } })(); function convertState(state) { return state.replace(".", "\\\.").replace("*", ".*"); } return { // 是否有访问某url的权限 isAccessUrl:function(url) { var user = $sessionStorage.USER; for(var role in roles) { if(user.role.toLowerCase() == roles[role].toLowerCase()) { console.log(urlPermissions[roles[role]]) for(i in urlPermissions[roles[role]]) { var regx = eval("/"+convertState(urlPermissions[roles[role]][i])+"/"); console.log(regx+ " "+ url) if(regx.test(url)) { return true; } } } } return false; } } }])
roles是角色,从后台获取;urlPermissions是每个角色对应的能被其访问的url列表,也从后台获取,可通过后台配置。这样,每次新增角色,我们就可以动态为其配置访问权限。
最重要的是isAccessUrl方法,传入url后,isAccessUrl首先会通过$sessionStorage获取用户信息,取得用户角色,然后看用户角色是否在角色表中;若在角色表中,就看此角色是否有访问url的权限。我们在后台配置的时候,是直接指定状态,但如果没有通配符的话,那么每一个页面都得写一个url,所以,就增加了通配符 功能,然后将url列表中的每个url转化为正则表达式,再来验证,这样配置就灵活了很多。
最后是在run中监听事件$stateChangeStart :
App.run(["$rootScope",'$state', "auth", "$sessionStorage", function($rootScope, $state, auth, $sessionStorage){ $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { // 路由访问控制 if(toState.name!="page.login" && !auth.isAccessUrl(toState.name)) { // 查看是否需要登录: var user = $sessionStorage.USER; if(user == null) { event.preventDefault(); $state.go("page.login"); return; } event.preventDefault(); $state.go("page.error"); } }); }])
好了,现在就实现了url的访问控制。
页面元素的显示控制
至于第二点,我的解决方案是自定义指令,下面是示例:
<div zg-access="TEST_ACCESS"></div>
注意,这里传入的不是角色,而是权限。因为用户角色是可以动态扩展的,如果这里写的是什么样的角色才可以访问这个元素,那以后每新增一个角色都将是一个很大很大的麻烦,因为你得一个个来修改代码。下面是自定义指令zg-access的代码:
/** * 元素级别的访问控制指令 */ App.directive("zgAccess", function($sessionStorage, $http){ var roles = []; // 角色 var elemPermissions = {}; // 角色元素权限映射表,如{ "role":{"SEARCH"}},role有这个搜索权限 // 后台获取 (function(){ // 简便起见,这里直接生成 roles = ["admin", "user", "visitor"]; elemPermission = { "admin":["*"], "user":["SEARCH"], "visitor":[] } })(); console.log("zg-access"); return { restrict: 'A', compile: function(element, attr) { // 初始为不可见状态none,还有 禁用disbaled和可用ok,共三种状态 var level = "none"; console.log(attr) if(attr && attr["zgAccessLevel"]) { level = attr["zgAccessLevel"]; } switch(level) { case "none": element.hide(); break; case "disabled": element.attr("disabled", ""); break; } // 获取元素权限 var access = attr["zgAccess"]; // 将此权限上传到后端的数据库 (function(){ //upload })(); return function(scope, element) { // 判断用户有无权限 var user = $sessionStorage.USER; if(user==null||angular.equals({}, user)) { user = {}; user.role = "visitor"; } var role = user.role.toLowerCase(); console.log(roles); for(var i in roles) { var tmp = roles[i].toLowerCase(); if(role == tmp) { tmp = elemPermission[role]; console.log(tmp) for(var j in tmp){ console.log(tmp[j]+" "+access); if(access.toLowerCase() == tmp[j].toLowerCase()) { element.removeAttr("disabled"); element.show(); } } } } }; } } })
zgAccessLevel是一个属性,用来控制级别,如果是none(默认为none),就不显示元素;如果是disbaled,就是元素不可用(如Button不可用)。
下面是元素示例:
<button ng-click="" zg-access="SEARCH" zg-access-level="disabled">Search</button>
此时,若以admin角色或者user角色登录,Search按钮将不可用。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

在現今資訊時代,網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備,為使用者提供優質的體驗,成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站,進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發。 PHP具有許多優點,如易於學習、跨平台、豐富的工具庫、開發效

隨著網路的不斷發展,Web應用已成為企業資訊化建設的重要組成部分,也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展,開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術,它們分別是伺服器端和客戶端的解決方案,透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP

隨著Web技術的快速發展,單頁Web應用程式(SinglePageApplication,SPA)已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序,SPA的最大優勢在於使用者感受更加流暢,同時伺服器端的運算壓力也大幅減少。在本文中,我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

這篇文章介紹的內容是關於AngularJS基礎入門介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下。

隨著網路的普及和發展,前端開發已變得越來越重要。身為前端開發人員,我們需要了解並掌握各種開發工具和技術。其中,PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中,我們將介紹如何使用這兩種工具進行前端開發。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言,它適用於Web開發,可以在Web伺服器和各種作業系統上運作。 PHP的優點是簡單、快速、便

隨著Web應用程式的普及,前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架,它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面,對於後端編程,PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程,那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效

隨著網路的普及,越來越多的人使用網路進行檔案傳輸和分享。然而,由於各種原因,使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此,建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台,基於PHP和AngularJS,能夠方便地進行文件上傳、下載、編輯、刪除等操作,並且提供了一系列強大的功能,例如文件共享、搜尋、
