在前后端分离项目中(如:Vue、Angular、React等),前端常常涉及到根据权限显示数据、操作等等重复的实现所困惑。每当开启一个新项目时,我们都得手动重复去编写这些代码,而且还难免代码逻辑不一致,质量参差不齐。
Buession ShiroJs 旨在提供便捷的、统一的、可靠的权限前端权限验证功能。在业务开发中省去的那些“脏活累活”,专注于业务核心的开发。
Buession ShiroJs 的核心思想参考 Apache Shiro 。
您可以通过 NPM、YARN 或者通过 <script>
的方式引入 unpkg.com 上的包。
npm install @buession/shiro
# or
yarn add @buession/shiro
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。
最新版:<script src="https://unpkg.com/@buession/shiro/dist/shiro.min.js" type="text/javascript"></script>
具体版本:<script src="https://unpkg.com/@buession/shiro@版本/dist/shiro.min.js" type="text/javascript"></script>
<template>
<div>
<div v-if="shiro.hasRole('admin')">Admin</div>
<div v-if="shiro.hasPermission('user:edit')">Edit</div>
<div v-if="shiro.hasPermissions(['user:add', 'user:edit'])">Action</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
}
});
</script>
<script type="text/javascript">
function Principal(){
this.id = '1';
}
Principal.prototype.getId = function(){
return this.id;
}
Principal.prototype.getRoles = function(){
return ["admin", "admin1"];
}
Principal.prototype.getPermissions = function(){
return ["user:add", "user:edit"];
}
var shiro = new Shiro(new Principal());
if (shiro.hasRole("admin")) {
}
</script>
MIT License © 2020-2023