Vue 前端應用進行身份認證權限控制的一種方法

若是你們以爲有用，更多的模塊請點擊查看

• 系列文章

  • 用Vue來進行移動Hybrid開發和客戶端間數據傳輸的一種方法
  • Vue 頁面狀態保持頁面間數據傳輸的一種方法
  • Vue 前端應用進行身份認證權限控制的一種方法
  • Vue 減小和服務端交互的樣板代碼一種方法

點擊訪問demo

掃碼訪問

權限控制能夠分爲：

• 身份認證權限控制
• 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()
複製代碼