Vue 前端应用进行身份认证权限控制的一种方法

时间 2019-11-17 标签 vue 前端应用进行身份认证权限控制一种方法

若是你们以为有用，更多的模块请点击查看前端

系列文章vue

扫码访问github

权限控制能够分为：ajax

身份认证权限控制
RBAC权限控制

下面介绍一下vue-viewplus 一个简化Vue应用开发的工具库中的login-state-check.js 身份认证权限控制模块。：正则表达式

使用该模块可让应用使用一个包含正则表达式的数组LoginStateCheck#checkPaths，来定义须要进行身份认证（登陆）才能访问的页面资源（路由的path），这样作的好处就在于，咱们不用向不少应用那些去修改路由组件中的mate字段来确认哪个路由组件须要进行身份认证权限控制。vuex

通常的应用在权限控制这一块，通常有两种需求，一种是基于RBAC权限模型的管理端应用，而大多数应用只须要控制那些页面须要用户登陆才能访问；当前模块默认认为全部页面都是公共资源，若是要进行身份认证权限控制，能够这样定义：数组

loginStateCheck: {
    checkPaths: [
      /User\/Manage/
    ],
    ...
复制代码

这样全部用户管理资源就都须要登陆才能进行访问了。缓存

匹配规则：若是在LoginStateCheck#checkPaths须要身份认证规则集中，那么就须要查看用户是否登陆，若是没有登陆就拒绝访问；固然插件内部仍是依赖router的导航守卫来进行拦截控制；session

注：

该模块维护了一个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()
复制代码