antdPro,umiJs,浏览器地址栏初始化进入页面或者刷新页面时钩子getInitialState()
因为本人接手项目是直接用antdPro后台开箱即用,初期无须登录页相关账号验证功能,保留登录页输入任意账密跳转主页,可以在浏览器修改url地址跳转指定路由,例如修改域名ip和端口直接跳转,但是每次刷新页面和浏览器url跳转都会跳到登录页。
getInitialState()
只因有app.tsx里面的getInitialState(),个人理解为浏览器地址栏初始化umiJS插件(守卫)。
antdPro开箱即用 src/app.tsx
代码。
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */
import { currentUser as queryCurrentUser } from './services/user/Login/api';//源代码api接口地址是源自项目mock
/**..省略部分代码..**/
export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
currentUser?: API.CurrentUser;
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
const fetchUserInfo = async () => {
try {
const msg = await queryCurrentUser();//检测登录信息,未登录则到达.catch跳转登录页
return msg.data;
} catch (error) {
history.push(loginPath);
}
return undefined;
};
// 如果是登录页面,不执行
if (history.location.pathname !== loginPath) {
const currentUser = await fetchUserInfo();
return {
fetchUserInfo,
currentUser,
settings: {},
};
}
return {
fetchUserInfo,
settings: {},
};
}
官方说明文档:https://umijs.org/zh-CN/plugins/plugin-initial-state
useModel
配合 useModel
获取初始值:
//官方源码
import { useModel } from 'umi';
export default () => { const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState'); return <>{initialState}</>};
自测
在antdPro的welcome页组件食用。
结果
只在刷新浏览器或者修改浏览器url地址跳到组件才会打印输出。
其余功能有待享用。
–文章纯粹记录和分享小前端遇到的大小问题,请大家多指教!–