@uiw-admin/authorized NPM

权限组件

判断组件的权限

何时使用

当项目需要根据权限判断组件是否展示使用组件时，请在 .kktprc.js文件中配置全局变量

export default {
  define:{
+   AUTH:true,
    //  ...
  }
  //  ...
}

安装

npm i @uiw-admin/authorized --save # yarn add @uiw-admin/authorized

AuthPage

可用于页面重定向

参数说明

参数	必填	类型	默认值	说明
authority	否	`boolean`		判断是否有权限展示内容
redirectPath	否	`string`	`/login`	未登录重定向路径
children	是	`JSX.Element`		是否已经登录

import AuthPage  from "@uiw-admin/authorized"
export default ()=>{
  return <AuthPage authority={false} redirectPath="/login">展示</AuthPage>
}

getAuthPath

判断是否有权限

type getAuthPath = (path?: string)=>boolean 

import {getAuthPath}  from "@uiw-admin/authorized"

const isAuth = getAuthPath("/api/path")

AuthBtn

外层嵌套组件，判断子组件是否有权限展示或使用

参数说明

参数	说明	必填	类型	默认值
path	路径	否	`string`	-
disabled	禁用状态展示(适用于存在 disabled 属性的组件)	否	`boolean`	`false`
children	内容	是	`React.ReactNode`	-

window.AUTH = true // 是否开启权限校验
window.STORAGE = "session" // 本地存储数据方式
// 上面这两种变量可以在`.kktprc.js`文件中配置全局变量(`define`)
sessionStorage.setItem('auth',JSON.stringify(["/dom/save","/dom/edit"])) // 权限数据
// 以上数据只能为了能正常渲染设置的变量

import React from "react"
import { AuthBtn } from "@uiw-admin/authorized"
import { createRoot } from 'react-dom';

const Demos = ()=>{
  return (
   <div>
     <AuthBtn path="/dom/save" >
       子集渲染1
     </AuthBtn>
     <AuthBtn path="/dom/edit" disabled >
       <button>子集渲染2</button>
     </AuthBtn>
      <AuthBtn path="/dom/edit1" disabled >
       <button>子集渲染3</button>
     </AuthBtn>
      <AuthBtn path="/dom/edit1"  >
       <button>子集渲染4</button>
     </AuthBtn>
   </div>
  )
}
createRoot(_mount_).render(<Demos />);