antd pro登录以及管理页的出现与否

        我的项目是使用antd pro的官方文档搭建起来的项目,接下来说一说我在写项目的时候所遇到的问题:

1、只有一个登录接口,无法获取当前用户的信息

        由于antd pro这个管理后台模板在登录的时候,使用一个用户登录的接口,还有一个获取当前用户的接口;这就导致我们在只有一个接口的时候,没有办法获取到当前登录用户的信息。以致于无法正确跳转页面。

        我用的方法是将登录接口返回给我们的数据放在本地(localStorage),然后将本地的用户信息给到当前用户,即将app.tsx中fetchUserInfo的代码改为:

此时我们不需要更改其他代码,即可跳转。 在跳转结束之后,原本的头像和名字还存在,因此需要将其改掉即可。

关于头像和名字这一块,最重要的是需要将avatarDropdown.tsx中的代码修改一下

以上就是关于登录跳转以及头像名字的设置。

注:ts写的一般都是有各自的数据类型,当前用户currentUser的用的是API.CurrentUser,所以我们需要在type.d.ts中添加有我们自己的用户信息的变量。(也可以不添加,添加之后,会有信息提示,方便我们快速地写代码;前面的是我自己添加,照着下面的写成一样的即可)

 2、用户的权限,判断管理页是否出现:

        前面我们已经定义了当前用户CurrentUser的信息内容,只需要在access.ts文件中将判断权限的信息改掉即可。 

3、一般在使用接口的时候都会遇到跨域的问题:(我是使用代理的方法解决)

        将config文件中的proxy.ts改成接口的域名即可,使用的时候只需要写'/api'+除去域名之后的就可以了。

         介绍一个微软Edge的一个解决跨域的扩展插件CORS

         在微软浏览器上运行将其点一下就可以了,如果显示黄色,就是开着,就可以快速解决跨域。

         以上便是我使用antd pro这个模板所遇到的问题以及解决办法。

 

 

 

可以通过以下步骤实现: 1. 在退出登录的处理函数中,调用 `window.localStorage.clear()` 清空本地存储。 2. 在 `App` 组件中使用 `React` 的 `useState` 钩子来维护当前打开的签列表,以及当前激活的签。 3. 在 `App` 组件的 `useEffect` 钩子中监听 `localStorage` 的变化,如果发现 `localStorage` 被清空了,则清空当前打开的签列表,并将当前激活的签设置为 `null`。 4. 在 `Tabs` 组件中,使用 `React` 的 `useEffect` 钩子来监听当前激活的签是否为 `null`,如果是,则重定向到登录。 下面是示例代码: ```jsx import React, { useState, useEffect } from 'react'; import { Tabs } from 'antd'; const { TabPane } = Tabs; const App = () => { const [activeKey, setActiveKey] = useState(null); const [panes, setPanes] = useState([]); const handleLogout = () => { window.localStorage.clear(); }; useEffect(() => { const panesFromStorage = window.localStorage.getItem('panes'); if (panesFromStorage) setPanes(JSON.parse(panesFromStorage)); const activeKeyFromStorage = window.localStorage.getItem('activeKey'); if (activeKeyFromStorage) setActiveKey(activeKeyFromStorage); }, []); useEffect(() => { window.localStorage.setItem('panes', JSON.stringify(panes)); window.localStorage.setItem('activeKey', activeKey || ''); }, [panes, activeKey]); useEffect(() => { const handleStorageChange = () => { if (!window.localStorage.getItem('panes')) { setPanes([]); setActiveKey(null); } }; window.addEventListener('storage', handleStorageChange); return () => { window.removeEventListener('storage', handleStorageChange); }; }, []); const handleTabChange = (key) => { setActiveKey(key); }; const handleEdit = (targetKey, action) => { if (action === 'remove') { const nextPanes = panes.filter((pane) => pane.key !== targetKey); setPanes(nextPanes); if (activeKey === targetKey) { setActiveKey(nextPanes[nextPanes.length - 1].key); } } }; return ( <> <button onClick={handleLogout}>退出登录</button> <Tabs activeKey={activeKey} onChange={handleTabChange} type="editable-card" onEdit={handleEdit} > {panes.map((pane) => ( <TabPane tab={pane.title} key={pane.key}> {pane.content} </TabPane> ))} </Tabs> </> ); }; export default App; ``` 在上面的代码中,我们使用 `useState` 钩子来维护当前打开的签列表 `panes`,以及当前激活的签 `activeKey`。在 `handleLogout` 函数中,我们调用 `window.localStorage.clear()` 清空本地存储。在 `useEffect` 钩子中,我们从本地存储中读取 `panes` 和 `activeKey`,并将它们保存到组件的状态中。在 `useEffect` 钩子中,我们还监听 `localStorage` 的变化,如果发现 `localStorage` 被清空了,则清空当前打开的签列表,并将当前激活的签设置为 `null`。在 `Tabs` 组件中,我们使用 `useEffect` 钩子来监听当前激活的签是否为 `null`,如果是,则重定向到登录
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值