解决 dva 注销退出系统后再点击登入,state 数据未清空的问题?

使用 dva 开发的后管系统,当退出系统时数据容器 models 中的 state 值并不会清空,造成重新登入系统仍然可以看到上一次登入系统时的数据。下面举例其中一种场景进行说明。

一、问题

使用 admin 用户登入系统,进入 用户管理 菜单。

表格中总共有三条数据:

表格中总共有三条数据

通过名称进行过滤查询,查的一条数据:

用户列表

现在退出系统,使用 guest 用户再次登入系统,进入 用户管理 菜单,会发现竟然还是一条数据,也就是之前 admin 用户过滤查询之后的数据。

不同用户之间数据竟然无意间进行了共享,这是不被允许的。

二、分析原因

使用 admin 用户登入,通过名称过滤查询得到一条数据,该数据被放在一个叫做 数据容器 (models 目录下的 state 里面)中,只要 数据容器 值变了,页面也就相应改变。所以页面由三条数据变成了一条数据。

admin 用户退出系统时,清空了 cookie,但是并没有清空数据容器 (models >
state) 中的值,这就导致 guest 用户登入后 数据容器 (models 目录下的 state 里面)中依然还是那一条数据,所以页面还是之前 admin 用户查询的那条数据。

搞清楚这一点,解决这个问题也就只需在退出系统时,手动清空 数据容器(models 目录下的 state 里面)中的值即可。

// models > app.js
export default {
  namespace: 'app',
  // 数据容器即这里面的属性
  state: {
      userList: [],
  },
  effects: {
    * logout: ({ payload = {} }, { put, call }) {
      // 清空 cookie ,退出到登录页面
    }
  }
}

三、解决方法

实践不可行操作方式

src > index.js 中添加 onReducer 钩子函数,监听当触发 app/logout 退出系统时,手动清空数据容器中的值。

// ..............

const app = dva({
  history: createHistory(),
  onError (error) {
    message.error(error.message);
  },
  // >>>>>>>>>>>>>>>>>>> add start >>>>>>>>>>>>>>>>>>>>>>>>
  onReducer: r => (state, action) => {
    const newState = r(state, action);
    // 'app/logout' 为 models 目录文件中 effect 中的方法名
    if (action.payload && action.payload.actionType === 'app/logout') {
      return { app: newState.app, loading: newState.loading, routing: newState.routing };
    }
    return newState;
  },
  // >>>>>>>>>>>>>>>>>>> add end >>>>>>>>>>>>>>>>>>>>>>>>
});

// ..............

对于这种写法不理解的可以手动打印下几个变量的值看看(我也不理解为啥这么写,dva API_zh-CN.md 里提供的写法)。(使用 onReducer 钩子函数在实践应用中并不能达到预期效果。

实践可行的操作方式

想要在注销系统时将 dva 中 state 数据清空,可以刷新页面。每次刷新页面都会重新将 html 以及 js 在浏览器中加载一次,同时运行 app.start() 方法启动 dva 这个步骤。使用 window.location.pathname 跳转 / 路由(location 方法会刷新页面)。

*logout ({ payload }, { call, put }) {
  // 跳转路由,刷新页面,此时 dva 中 state 数据也会在内存中重新刷新
  window.location.pathname = '/';
  message.success('注销成功。');
},

在路由文件 router.js 中控制跳转:

<LocaleProvider locale={zhCN}>
      <ConnectedRouter history={history}>
        <Switch>
          <Redirect exact from='/' to='/login' />
        </Switch>
      </ConnectedRouter>
    </LocaleProvider>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 从三月份找实习到现在,面了一些公司,挂了不少,但最终还是拿到小米、百度、阿里、京东、新浪、CVTE、乐视家的研发岗...
    时芥蓝阅读 42,015评论 11 349
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,295评论 18 399
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 回家的路上,会路过一条美丽的小溪,小溪从山间流出来,岸边有着挺拔的白杨和婀娜的垂柳。偶尔会有一条小船停在岸边,还有...
    Rene_Yu阅读 232评论 0 0