feat: 新增权限按钮

src/Login.tsx

@@ -4,6 +4,8 @@ import './assets/styles/login.scss'
 import { getCaptchaApi, loginApi } from "./api/login";
 import { useNavigate } from "react-router-dom";
 import { setToken } from "./utils/auth";
+import { useDispatch } from "react-redux";
+import { addAuthInfo, getAuthInfo } from "./stores/auth";
 
 type Login = {
   uuid?: string,
@@ -16,8 +18,14 @@ export default function Login() {
   const [messageApi, contextHolder] = message.useMessage()
   const [uuid, setUuid] = useState<string>('')
   const [captcha, setCaptcha] = useState<string>('')
+  const dispatch = useDispatch()
   const navigate = useNavigate()
 
+  const requestAuthInfo = async () => {
+    const { payload } = await dispatch(getAuthInfo() as any)
+    dispatch(addAuthInfo(payload))
+  }
+
   const getCaptcha = async () => {
     try {
       const { code, data } = await getCaptchaApi()
@@ -37,6 +45,7 @@ export default function Login() {
       if (code === 1000) {
         setToken(data)
         messageApi.success(msg)
+        requestAuthInfo()
         navigate('/')
         return
       }

src/components/Authenticationbtn.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useSelector } from "react-redux";
 
 /**
  * @author {温华}
@@ -9,9 +10,10 @@ import { useState } from "react";
 
 export default function Authenticationbtn({ permission, children }: any) {
   // 还需从缓存中获取用户权限数组
+  const authInfo = useSelector((store: any) => store.auth)
   const [visible, setVisible] = useState(true)
   const allPermission: string = "*:*:*"
-  const authPermissions: Array<string> = []
+  const authPermissions: Array<string> = authInfo.permissions
   if(permission && permission instanceof Array && permission.length > 0) {
     const permissiosFlag = permission
     const hasPermission = authPermissions.some((perm: string)=>{
@@ -20,6 +22,6 @@ export default function Authenticationbtn({ permission, children }: any) {
     setVisible(hasPermission)
   }
 
-  if(visible) return <div>{children}</div>
+  if(visible) return children
   return null
 }

src/view/home/index.tsx

@@ -1,5 +1,10 @@
+import Authenticationbtn from "@/components/Authenticationbtn";
+import { Button } from "antd";
+
 export default function Home() {
   return(
-    <div>home</div>
+    <Authenticationbtn permission="['system:list']">
+      <Button>测试</Button>
+    </Authenticationbtn>
   )
 }