ant-design-pro models数据怎么持久化

ts5bxd6k
  • 3
新手上路,请多包涵

最近在写react练手,使用了 ant-design-pro,做登陆的时候需要将登陆用户信息缓存起来,用了官方的models

import {
  autoLogin
} from '@/services/ant-design-pro/user';//登陆接口

export default {
  namespace: 'user',
  state: {
    userInfo: {},
  },
  reducers: {
    changeUserInfo(state, action) {
      return {
        ...state,
        userInfo: action.payload.userInfo
      };
    }
  },
  effects: {
    * autoLoginEff({ payload: { authCode } }, { put, call }) {
      const data = yield call(autoLogin, authCode);
      if (data) {
        yield put({
          type: "changeUserInfo",
          payload: {
            userInfo: data.data
          }
        });
      }
    }
  },
}

在组件中获取和写入没问题,但是页面一刷新数据就没有了,请问有没有什么方法写入浏览器缓存的,直接用sessionStorage.setItem这个方法我知道,有没有类似vuex-persist的依赖可以用的,怎么调用
还有使用官方命令生产的项目会有个app.jsx入口文件,请问怎么在该页面调用models
app.jsx

import { PageLoading } from '@ant-design/pro-layout';
import { history, Link } from 'umi';
import RightContent from '@/components/RightContent';
import Footer from '@/components/Footer';
import { autoLogin } from './services/ant-design-pro/user';
import { BookOutlined, LinkOutlined } from '@ant-design/icons';
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/home';
export const initialStateConfig = {
  loading: <PageLoading />,
};
/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState () {
  // e13b96e4a177a81d0ba865f7c6a9203b
  if (history.location.query.auth_code) {
    const userInfo = await autoLogin(history.location.query.auth_code)
    const currentUser = userInfo.data
    return {
      currentUser,
      settings: {},
    };
  }
  return {
    settings: {},
  };
}
// ProLayout 支持的api https://procomponents.ant.design/components/layout

export const layout = ({ initialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    footerRender: () => <Footer />,
    onPageChange: () => {//页面切换执行
      const { location } = history; // 如果没有登录,重定向到 login

      if (!initialState?.currentUser && location.pathname !== loginPath) {
        console.log("未登录")
        // history.push(loginPath);
      }
    },
    links: isDev
      ? [
        <Link to="/umi/plugin/openapi" target="_blank">
          <LinkOutlined />
          <span>OpenAPI 文档</span>
        </Link>,
        <Link to="/~docs">
          <BookOutlined />
          <span>业务组件文档</span>
        </Link>,
      ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    ...initialState?.settings,
  };
};
回复
阅读 154
1 个回答
ts5bxd6k
  • 3
新手上路,请多包涵
✓ 已被采纳

使用redux-persist可进行缓存持久化
先下载依赖redux-persist
在app.jsx中添加代码

// 添加缓存持久化
import { getDvaApp } from 'umi'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
export const dva = {
  config: {
    onError (e) {
      e.preventDefault()
    },
    onReducer (reducer) {
      const persistConfig = {
        key: 'root',
        storage,
        blacklist: []// reducer 里不持久化的数据
      }
      return persistReducer(persistConfig, reducer)
    }
  }
}

在官方方法getInitialState中添加

//请进行异步操作,否则会出现数据更新不及时问题
 setTimeout(() => {
    const app = getDvaApp()
    persistStore(app._store)
  }, 0)

成功后,dispatch时会将数据同步缓存进浏览器缓存中
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏