2.1.1 • Published 1 year ago

@antdp/authorized v2.1.1

Weekly downloads
9
License
MIT
Repository
github
Last release
1 year ago

@antdp/authorized

npm npm download

权限判断组件或方法,通过判断是否进入主界面还是登录界面。

权限

下载依赖

$ npm i @antdp/authorized  # yarn add @antdp/authorized

启用方式

配置开启。同时需要 config/config.ts 提供权限配置。

import config from '@antdp/config';
import proxy from './proxy';
import router from './router.json';
export default config(router, {
  proxy,
  define: {
+  ANTD_AUTH_CONF: {
+    auth_menu: 'authMenu',
+    auth_btn: 'authBtn',
+    auth_check_url: true,
  }
});

ANTD_AUTH_CONF 权限配置参数

参数说明类型默认值
auth_menu储存菜单路由权限---本地keysstringauthMenu
auth_btn储存按钮路径权限---本地keysstringauthBtn
auth_check_url判断路径是否有权限的字段 默认值menuUrl,如果字段设置为undefinedauth_menuauth_btn储存形式为 ["/web"],反之储存形式为[{menuUrl:"/web"}]stringmenuUrl

路由菜单权限

这是你的路由菜单(config/router.json)

[
  {
    "path": "/login",
    "component": "@/layouts/UserLayout"
  },
  {
    "path": "/",
    "component": "@/layouts/BasicLayout",
    "routes": [
      {
        "path": "/",
        "redirectTo": "/welcome"
      },
      {
        "path": "/welcome",
        "name": "首页",
        "icon": "welcome",
        "locale": "welcome",
        "component": "@/pages/Home/index"
      },
      {
        "path": "/404",
        "name": "404",
        "hideInMenu": true,
        "icon": "file-protect",
        "component": "@/pages/404"
      },
      {
        "path": "/403",
        "name": "403",
        "hideInMenu": true,
        "icon": "file-protect",
        "component": "@/pages/403"
      }
    ]
  }
]

登陆后后端返回的菜单列表可能如下

const menus = ['/', '/welcome', '/404', '/403'];

路由匹配过程

  • 1.当你登陆成功后,你需将其保存于你的sessionStorage中,储存的字段为你ANTD_AUTH_CONF中配的auth_menu字段,并在登陆后存储在sessionStorage中,如sessionStorage.setItem('authMenu', JSON.stringify([]))
  • 2.当你跳转至页面时,会根据sessionStorage中authMenu进行权限匹配,如果没有权限则会跳往404或403页面

请保证403 和 404页面存在

页面权限重定向

如果你想根据 token判断是否重定向回登陆页,可在 layouts/BasicLayout.ts 中添加Authorized

import Authorized from '@antdp/authorized';
import BasicLayouts from '@antdp/basic-layouts';

const Layout = () => {
  const token =''
  return (
    <Authorized authority={!!token} redirectPath="/login">
      <BasicLayouts
        projectName="Ant Design"
      />
    </Authorized>
  );
};

export default Layout;

按钮权限

很多大型项目中,也会对按钮权限进行管理,请提前配置好ANTD_AUTH_CONF中配的auth_btn字段,并在登陆后存储在sessionStorage中,如sessionStorage.setItem("authBtn",JSON.stringify(['/api/select']))

// 为了渲染设置的本地权限数
import React from "react"
import { AuthorizedBtn } from "@antdp/authorized"
const Demo = ()=>{
  return (
    <AuthorizedBtn path="/api/select" >
      <button>按钮</button>
    </AuthorizedBtn>
  )
}
export default Demo;

AuthorizedBtn参数

参数说明类型默认值
path权限路径string-
children展示内容React.ReactNode-

使用AuthorizedConfigProvider 设置按钮权限配置

使用 AuthorizedConfigProvider可以自己进行重新设置组件包裹内的所有按钮的权限参数,不使用默认配置的按钮权限配置

  import React from "react"
  import { AuthorizedBtn ,AuthorizedConfigProvider } from "@antdp/authorized"
  const Page = ()=>{
    useEffect(()=>{
      sessionStorage.setItem("btn",JSON.stringify([{ menuUrl:"/api/select"} ]))
    },[])
    return (
      <AuthorizedConfigProvider isCheckAuth={true} auth_btn="btn">
        <AuthorizedBtn path="/api/select" >
          <button>查询</button>
        </AuthorizedBtn>
      </AuthorizedConfigProvider>
  )
}
export default Page

AuthorizedConfigProvider参数

参数说明类型默认值
auth_menu储存菜单路由权限---本地keysstringauthMenu
auth_btn储存按钮路径权限---本地keysstringauthBtn
auth_check_url判断路径是否有权限的字段 默认值menuUrl,如果字段设置为undefinedauth_menuauth_btn储存形式为 ["/web"],反之储存形式为[{menuUrl:"/web"}]stringmenuUrl
isCheckAuth是否检查权限booleanfalse
children子内容string-

License

Licensed under the MIT License.

2.1.1

1 year ago

2.1.0

1 year ago

2.0.24

1 year ago

2.0.23

2 years ago

2.0.22

2 years ago

2.0.21

2 years ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.20

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

2.0.1

2 years ago

1.9.1

2 years ago

1.9.0

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.0

2 years ago

2.0.0-bate.5

2 years ago

2.0.0-bate.4

2 years ago

2.0.0-bate.3

2 years ago

1.8.25

2 years ago

1.8.26

2 years ago

1.8.27

2 years ago

2.0.0-bate6

2 years ago

2.0.0-bate-2

2 years ago

2.0.0-bate-4.1

2 years ago

2.0.0-bate.4.0

2 years ago

2.0.0-bate-1

2 years ago

2.0.0-bate-0

2 years ago

1.8.20

3 years ago

1.8.21

3 years ago

1.8.22

3 years ago

1.8.23

3 years ago

1.8.24

3 years ago

1.8.17

4 years ago

1.8.18

4 years ago

1.8.19

4 years ago

1.8.16

4 years ago

1.8.15

4 years ago

1.8.14

4 years ago

1.8.13

4 years ago

1.8.12

4 years ago

1.8.11

4 years ago

1.8.9

4 years ago

1.8.10

4 years ago

1.8.8

4 years ago

1.8.7

4 years ago

1.8.6

4 years ago

1.8.2

4 years ago

1.8.5

4 years ago

1.8.4

4 years ago

1.8.3

4 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.0

4 years ago

1.6.19

4 years ago

1.6.17

4 years ago

1.6.16

4 years ago

1.6.18

4 years ago

1.6.15

4 years ago

1.6.14

4 years ago

1.6.11

4 years ago

1.6.13

4 years ago

1.6.4

4 years ago

1.6.9

4 years ago

1.6.8

4 years ago

1.6.10

4 years ago

1.6.7

4 years ago

1.6.6

4 years ago

1.6.5

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.0

4 years ago

1.5.4

5 years ago

1.5.2

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.12

5 years ago

1.3.11

5 years ago

1.3.10

5 years ago

1.3.9

5 years ago

1.3.8

5 years ago

1.3.7

5 years ago

1.3.6

5 years ago

1.3.5

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.0

5 years ago

1.2.1

5 years ago

1.1.23

5 years ago

1.1.22

5 years ago

1.1.21

5 years ago