详解vue身份认证管理和租户管理


Posted in Vue.js onMay 25, 2021

概述

功能模块的开发往往是最容易的,但是要处理好每个细节就不容易了。就拿这里的身份认证管理模块来说,看似很简单,因为后端接口都是ABP模板里现成的,前端部分无非就是写界面,调接口,绑数据;但是看一下ABP Angular版本的代码,就会发现他其实是有很多细节方面的处理的。

回到vue,因为前端部分的代码文件太多,下面只列出一些需要注意的细节,其他的像vue组件、表格、表单、数据绑定、接口请求之类的其实都差不多就不说了。

按钮级权限

前面章节中实现了菜单权限的控制,按钮权限的道理也是一样的。判断abpConfig.auth.grantedPolicies是否包含某个权限,然后在组件中使用v-if渲染就好了。

src\utils\abp.js:

export function checkPermission(policy) {
  const abpConfig = store.getters.abpConfig;
  if (abpConfig.auth.grantedPolicies[policy]) {
    return true;
  } else {
    return false;
  }
}

src\views\identity\roles.vue:

<el-button
  class="filter-item"
  style="margin-left: 10px;"
  type="primary"
  icon="el-icon-edit"
  @click="handleCreate"
  v-if="checkPermission('AbpIdentity.Roles.Create')"
>
  {{ $t("AbpIdentity['NewRole']") }}
</el-button>

详解vue身份认证管理和租户管理

详解vue身份认证管理和租户管理

身份认证管理

角色和用户的增删改查就不说了,这里要注意一下权限管理。用户和角色都需要用到权限管理,在ABP Angular版中是一个独立的permission-management模块。我这里也把他作为一个公用组件,根据providerName来区分,"R"是角色权限,"U"是用户权限。

R/U权限

他们有一点区别,用户权限可能来自于角色权限,所以用户中的权限需要显示是来自哪个providerName和providerKey,如果来自其他provider则disabled,不可以修改。

src\views\identity\components\permission-management.vue:

<el-form label-position="top">
  <el-tabs tab-position="left">
    <el-tab-pane
      v-for="group in permissionData.groups"
      :key="group.name"
      :label="group.displayName"
    >
      <el-form-item :label="group.displayName">
        <el-tree
          ref="permissionTree"
          :data="transformPermissionTree(group.permissions)"
          :props="treeDefaultProps"
          show-checkbox
          check-strictly
          node-key="name"
          default-expand-all
        />
      </el-form-item>
    </el-tab-pane>
  </el-tabs>
</el-form>
transformPermissionTree(permissions, name = null) {
  let arr = [];
  if (!permissions || !permissions.some(v => v.parentName == name))
    return arr;
  const parents = permissions.filter(v => v.parentName == name);
  for (let i in parents) {
    let label = '';
    if (this.permissionsQuery.providerName == "R") {
      label = parents[i].displayName;
    } else if (this.permissionsQuery.providerName == "U") {
      label =
        parents[i].displayName +
        " " +
        parents[i].grantedProviders.map(provider => {
          return `${provider.providerName}: ${provider.providerKey}`;
        });
    }
    arr.push({
      name: parents[i].name,
      label,
      disabled: this.isGrantedByOtherProviderName(
        parents[i].grantedProviders
      ),
      children: this.transformPermissionTree(permissions, parents[i].name)
    });
  }
  return arr;
},
isGrantedByOtherProviderName(grantedProviders) {
  if (grantedProviders.length) {
    return (
      grantedProviders.findIndex(
        p => p.providerName !== this.permissionsQuery.providerName
      ) > -1
    );
  }
  return false;
}

详解vue身份认证管理和租户管理

详解vue身份认证管理和租户管理

权限刷新

还有一个细节问题,如果正在修改的权限影响到了当前用户,如何立即生效。

src\views\identity\components\permission-management.vue:

updatePermissions(this.permissionsQuery, { permissions: tempData }).then(
  () => {
    this.dialogPermissionFormVisible = false;
    this.$notify({
      title: this.$i18n.t("HelloAbp['Success']"),
      message: this.$i18n.t("HelloAbp['SuccessMessage']"),
      type: "success",
      duration: 2000
    });
    fetchAppConfig(
      this.permissionsQuery.providerKey,
      this.permissionsQuery.providerName
    );
  }
);

src\utils\abp.js:

function shouldFetchAppConfig(providerKey, providerName) {
  const currentUser = store.getters.abpConfig.currentUser;

  if (providerName === "R")
    return currentUser.roles.some(role => role === providerKey);

  if (providerName === "U") return currentUser.id === providerKey;

  return false;
}
export function fetchAppConfig(providerKey, providerName) {
  if (shouldFetchAppConfig(providerKey, providerName)) {
    store.dispatch("app/applicationConfiguration").then(abpConfig => {
      resetRouter();

      store.dispatch("user/setRoles", abpConfig.currentUser.roles);

      const grantedPolicies = abpConfig.auth.grantedPolicies;

      // generate accessible routes map based on grantedPolicies
      store
        .dispatch("permission/generateRoutes", grantedPolicies)
        .then(accessRoutes => {
          // dynamically add accessible routes
          router.addRoutes(accessRoutes);
        });

      // reset visited views and cached views
      //store.dispatch("tagsView/delAllViews", null, { root: true });
    });
  }
}

详解vue身份认证管理和租户管理

还有很多需要注意的,比如isStatic===true的角色不可以删除,并且不可以修改名称;新增用户和编辑用户的密码校验规则需要区别对待;保存权限是差异保存。等等。。。有条件的可以看一下ABP的Angular代码。

租户管理

基本功能界面都差不多。。。但是这里有一个”管理功能“的选项,默认是显示”没有可用的功能“:

详解vue身份认证管理和租户管理

这玩意在界面上没地方添加,也没地方删除,但是这个功能相当实用。它来自ABP的FeatureManagement模块,也称为”特征管理“,这个后面再做介绍。

租户切换

完成了租户管理,那么登录时也应该可以切换租户。

详解vue身份认证管理和租户管理

切换租户比较简单,就是根据输入的租户名称获取到租户ID,然后调用/abp/application-configuration接口,把租户ID放到请求Header的__tenant字段中即可,之后的请求中也需要这个参数,不传的话就是默认的宿主端。

详解vue身份认证管理和租户管理

其实ABP后端是可以配置是否启用多租户的,这里也可以根据后端配置来显示或者隐藏租户切换的按钮。跟ABP模板相比,登录界面还缺少一个注册入口,后面再加上吧。

效果

详解vue身份认证管理和租户管理

详解vue身份认证管理和租户管理

详解vue身份认证管理和租户管理

详解vue身份认证管理和租户管理

详解vue身份认证管理和租户管理

最后

前端部分的模块开发就不再详细介绍了,主题还是ABP。进行到这里,ABP模板自带的前端部分功能就差不多完成了,需要代码的可以去 https://github.com/xiajingren/HelloAbp 拉取,后面我再把文件整理一下,弄一个干净的vue版本。

以上就是详解vue身份认证管理和租户管理的详细内容,更多关于vue身份认证管理和租户管理的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
Vue Element UI自定义描述列表组件
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
广告显示判断
2006/08/31 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
数据库基础的一些面试题
2012/02/25 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
护士自荐信
2013/10/25 职场文书
商务英语毕业生自荐信范文
2013/11/08 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
避暑山庄导游词
2015/02/04 职场文书
2016年会开场白台词
2015/06/01 职场文书
城南旧事电影观后感
2015/06/16 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书