前端界面權(quán)限控制-React/Vue實現(xiàn)
前言
在所有管理系統(tǒng)中疏哗，都會包含權(quán)限模塊糙臼，來進行用戶的權(quán)限分配和控制庐镐，從而達到操作和數(shù)據(jù)隔離。
權(quán)限管理主要以后臺權(quán)限控制為主变逃，加上前臺界面顯示來進行不同級別的權(quán)限控制管理必逆。
通常在前端的權(quán)限控制設(shè)計中，按照不同細粒度進行劃分為三類：
- 頁面級別
- 模塊級別
- 按鈕級別
在應(yīng)用React/Vue的前端框架界面中揽乱，這三類基本都是通過組件來進行權(quán)限控制名眉，所以本文主要針對組件的擴展來實現(xiàn)。
實現(xiàn)
以前端界面的用戶模塊權(quán)限控制為例凰棉，通過不同權(quán)限來顯示可操作的組件损拢，達到操作控制效果。
前端要加入權(quán)限控制的話撒犀，要確保新模塊對原系統(tǒng)的侵入性很小福压，盡量在不改動原系統(tǒng)框架的基礎(chǔ)上進行擴展。
首先在用戶登錄后或舞，后臺會返回相應(yīng)的權(quán)限集合荆姆，然后進行界面控制。
權(quán)限組集合:
// 權(quán)限集合
let auths = [
{id: 100, auth: 'admin_user', name: '用戶模塊'},
{id: 101, auth: 'admin_user_get', name: '查看用戶'},
{id: 102, auth: 'admin_user_add', name: '添加用戶'},
{id: 103, auth: 'admin_user_del', name: '刪除用戶'},
{id: 104, auth: 'admin_user_edit', name: '編輯用戶'},
]
接下來將從react和vue兩個框架分別實現(xiàn)權(quán)限控制
React實現(xiàn)
在react框架中映凳，采用的是React高階組件來實現(xiàn)權(quán)限控制胆筒。在不改動原有組件的情況下，對現(xiàn)有組件進行權(quán)限屬性擴展魏宽。
通過高階組件包裝現(xiàn)有組件腐泻，進行權(quán)限組件驗權(quán)决乎，如果組件無需權(quán)限控制或權(quán)限匹配，則默認不做處理派桩，直接顯示原組件构诚。如果組件權(quán)限校驗失敗，則顯示空內(nèi)容铆惑。[注意:使用高階組件包裝范嘱，如果原組件用到靜態(tài)方法和ref屬性，需要特殊處理员魏，請參考React高階組件說明]
驗權(quán)實現(xiàn):
// 組件驗權(quán)
function checkAuth(auth) {
// 用戶權(quán)限表
const rules = auths;
for (let i = 0; i < rules.length; i++) {
const item = rules[i]
// 無需權(quán)限控制或者權(quán)限匹配則通過
if(!auth || (auth == item.auth)){
return true
}
}
return false
}
// 高階組件包裝原組件
function warpAuth(WrappedComponent) {
let New = class extends React.Component {
constructor(props) {
super(props)
}
render () {
if (checkAuth(this.props.auth)) {
return <WrappedComponent {...this.props} />
} else {
return null
}
}
}
// 丑蛤！如果原組件有靜態(tài)方法，則需要進行拷貝處理
// https://github.com/mridgway/hoist-non-react-statics
// hoistNonReactStatic(New, WrappedComponent);
return New
}
實例應(yīng)用:
let Button = wrapAuth(Button)
class Page extends React.Component {
constructor(props) {
super(props)
}
render () {
return (
<div>
<Button auth="admin_user_add">添加用戶</Button>
<Button auth="admin_user_del">刪除用戶</Button>
<Button auth="admin_user_edit">編輯用戶</Button>
</div>
)
}
}
Vue實現(xiàn)
在vue框架中撕阎，采用的是Vue自定義指令來實現(xiàn)權(quán)限控制受裹。在不改動原有組件的情況下，對現(xiàn)有組件統(tǒng)一進行權(quán)限指令擴展虏束。
通過自定義權(quán)限指令棉饶，進行權(quán)限組件驗權(quán)，如果組件無需權(quán)限控制或權(quán)限匹配镇匀，則默認不做處理照藻，直接顯示原組件。如果組件權(quán)限校驗失敗汗侵，則移除該組件幸缕。[注意:添加自定義指令，全部組件包括第三方組件庫都會生效]
驗權(quán)實現(xiàn):
// 需要在入口處添加自定義權(quán)限指令v-auth晰韵，顯示可操作組件
Vue.directive('auth', {
bind: function (el, binding, vnode) {
// 用戶權(quán)限表
const rules = auths
for (let i = 0; i < rules.length; i++) {
const item = rules[i]
if(!binding.value || (binding.value == item.auth)){
// 權(quán)限允許則顯示組件
return true
}
}
// 移除組件
el.parentNode.removeChild(el)
}
})
實例應(yīng)用:
<template>
<div>
<Button v-auth="admin_user_add">添加用戶</Button>
<Button v-auth="admin_user_del">刪除用戶</Button>
<Button v-auth="admin_user_edit">編輯用戶</Button>
</div>
</template>
<script>
import {Button} from 'iview'
export default {
components: {
Button
},
data () {
}
}
</script>
總結(jié)
可能有人會說发乔，如果只通過簡單檢測是否有權(quán)限，那萬一有人進行非法權(quán)限注入雪猪，前端界面就會顯示本該無權(quán)限的操作組件列疗。針對這個問題的疑慮，我想說任何前端的權(quán)限控制浪蹂、加密、設(shè)防等技術(shù)都存在缺陷告材，因為暴漏在外的程序被破解的風險很高坤次，還是那句話，后臺對前臺發(fā)出的請求都不應(yīng)該直接信任斥赋，任何包含權(quán)限的操作都需要在后臺進行攔截和過濾缰猴，識別用戶的權(quán)限再進行處理。
好了疤剑，關(guān)于前端的權(quán)限控制就寫到這滑绒，有任何疑問和錯誤隨時留言闷堡，感謝支持
