如果大家覺得有用，更多的模組請點選檢視
-
系列文章
掃碼訪問
許可權控制可以分為：
- 身份認證許可權控制
- RBAC許可權控制
下面介紹一下vue-viewplus 一個簡化Vue應用開發的工具庫中的login-state-check.js 身份認證許可權控制模組。：
使用該模組可以讓應用使用一個包含正規表示式的陣列LoginStateCheck#checkPaths，來定義需要進行身份認證（登入）才能訪問的頁面資源（路由的path），這樣做的好處就在於，我們不用向很多應用那些去修改路由元件中的mate欄位來確認哪一個路由元件需要進行身份認證許可權控制。
一般的應用在許可權控制這一塊，一般有兩種需求，一種是基於RBAC許可權模型的管理端應用，而大多數應用只需要控制那些頁面需要使用者登入才能訪問；當前模組預設認為所有頁面都是公共資源，如果要進行身份認證許可權控制，可以這樣定義：
loginStateCheck: {
checkPaths: [
/User\/Manage/
],
...
複製程式碼這樣所有使用者管理資源就都需要登入才能進行訪問了。
匹配規則：如果在LoginStateCheck#checkPaths需要身份認證規則集中，那麼就需要檢視使用者是否登入，如果沒有登入就拒絕訪問； 當然外掛內部還是依賴router的導航守衛來進行攔截控制；
注：
- 該模組維護了一個vuex state vplus#loginState，來持有使用者登入狀態，在頁面重新整理的時候也通過快取資料來對其進行恢復；
- 這個狀態建議配合UtilHttp#accessRules.sessionTimeOut和UtilHttp#accessRules.onSessionTimeOut，來使用，也就是一般應用都是後臺來控制登入狀態或者說會話的時長，你需要在sessionTimeOut中配置後臺會話超時返回的錯誤碼，這樣外掛就會自動將當期模組的vplus#loginState設定為false，這樣就幫我們管理了這個不可控狀態；
- 如果沒有配置在改列表裡面的都被視為公共交易，即不需要身份認證就可以訪問；
示例
模擬一個身份認證訪問控制例子
個人管理頁面/Demo/Manage/User是一個需要進行身份認證才能訪問的router頁面，需要首先登陸才能進行訪問，如果後臺返回強制簽退的結果，那麼登陸狀態將會被設定為false，接著要訪問之前可以進入的個人管理頁面也會被自動攔截；
示例程式碼：
<template>
<div id="LoginStateCheck">
<group title="模擬一個簡單的身份認證許可權控制流程" label-width="15em" class="bottom-group">
<box gap="10px 10px">
<cell title="點選測試訪問一個需要登入之後才能訪問的頁面" link="/Demo/Manage/User"></cell>
</box>
<box gap="10px 10px">
<x-button @click.native="doLogin">登入</x-button>
</box>
<box gap="10px 10px">
<x-button @click.native="doLogout">退出登入</x-button>
</box>
<box gap="10px 10px">
<x-button @click.native="doForcedWithdrawal">模擬強制簽退</x-button>
</box>
</group>
</div>
</template>
<script type="text/ecmascript-6">
import demoMixin from './demo-mixin'
import { Cell } from 'vux'
export default {
mixins: [demoMixin],
components: {
Cell
},
methods: {
doLogin() {
this.$vp.ajaxMixin('LOGIN').then(data => {
this.doLoginBtnState = false
this.$vp.modifyLoginState(true)
console.log(`登入後狀態為： ${this.$vp.isLogin()}`)
this.$vp.uiToast('模擬登入成功')
})
},
doLogout() {
console.log(`登出前狀態為： ${this.$vp.isLogin()}`)
this.$vp.modifyLoginState(false)
console.log(`登入後狀態為： ${this.$vp.isLogin()}`)
this.$vp.uiToast('退出登入完成')
},
doForcedWithdrawal() {
this.$vp
.ajaxMixin('FORCEDWITHDRAWAL', {
mode: 'GET'
})
.catch(resp => {
console.error(`模擬強制簽退完成：${resp}`)
this.$vp.uiToast('模擬強制簽退完成')
})
}
},
created() {
console.log(
`登入前狀態為： ${this.$vp.isLogin()}`
)
}
}
</script>
複製程式碼示例所需配置：
Vue.use(ViewPlus, {
// ...
loginStateCheck: {
checkPaths: [
/Manage/
],
onLoginStateCheckFail(to, from, next) {
this.dialog(`onLoginStateCheckFail被回撥：待訪問資源【${to.path}】是需要登入才能訪問，請先登入`, {
action() {
next(false)
}
})
// 更新狀態進度條
store.commit('updateLoadingStatus', false)
}
}
})
複製程式碼配置
checkPaths
/**
* 需要進行身份認證檢查的路由path路徑集合
* {Array<Object>}
* <p>
* 陣列中的item，必須要是一個**正規表示式字面量**，如`[/^((\/Interbus)(?!\/SubMenu)\/.+)$/]`
* <p>
* 匹配規則：如果在`LoginStateCheck#checkPaths`**需要身份認證規則集**中，那麼就需要檢視使用者是否登入，如果沒有登入就拒絕訪問
*/
checkPaths = []
複製程式碼onLoginStateCheckFail
/**
* [*] `$vp#onLoginStateCheckFail(to, from, next)`
* <p>
* 身份認證檢查失敗時被回撥
*/
onLoginStateCheckFail = null
複製程式碼一般你可以需要這樣實現該函式：
onLoginStateCheckFail(to, from, next) {
this.uiToast('您尚未登入，請先登入')
next('/User/Login')
}
複製程式碼isLogin
/**
* 【可選】在初始化外掛的時候，預製登入狀態，如使用者可能已經在原生客戶端登入完畢，故可以通過此配置來初始化使用者狀態相關資訊；
*/
isLogin = false
複製程式碼API介面
isLogin
/**
* $vp.isLogin()
* 獲取使用者登入狀態
* <p>
* @return {boolean} 如果處於登入狀態返回true，否則返回false，直接通過獲取外掛vuex state中對應`loginState`的值
*/
isLogin()
複製程式碼modifyLoginState
/**
* $vp.modifyLoginState(isLogin = false)
* 修改登入狀態
* <p>
* 會修改外掛vuex state中對應`loginState`的值
* <p>
* 注意使用者的登入狀態前端只是一個`臨時維護`，即在服務端設定的session或者token有效期到了之後，服務端一般會返回**會話超時**這樣的錯誤，故我們在`util-http`模組還對此作了預留處理，詳見`utilHttp#accessRules.onSessionTimeOut`配置
* 所以在這裡我們只用操作vuex中的狀態即可
* @param {Boolean} [isLogin=false] 外掛使用vuex時候維護的登入狀態
*/
modifyLoginState(isLogin = false)
複製程式碼restoreLoginState
/**
* $vp.restoreLoginState()
* 恢復外掛中對應`store#loginState`的登入相關狀態，在當前模組重新安裝的時候，一般對應就是頁面重新整理的時候
*/
restoreLoginState()
複製程式碼