问题描述：

作者发现使用Ant Design Pro中存在一个问题，页面刷新后vuex数据丢失，导致UserInfo找不到影响页面的问题，故而写此文，望能助有需之人。

原因分析：

提示：Vuex的机制问题

vuex是存在浏览器页面内存的数据，所以刷新后就没有了，虽然很多人认为存在localstorage或者sessionstorage内不安全，但作者还是习惯存在浏览器内存。

解决方案：

1.src/store/modules/user.js Login方法内存在LocalStorage中

2.src/permission.js 对应调整

作者的做法是让每一次原项目中的获取getInfo接口至vuex的机制，改为从localstorage中获取，是不是非常的机灵鬼呢 *~*

user.js

    // 登录Login ({ commit }, userInfo) {return new Promise((resolve, reject) => {login(userInfo).then(response => {const result = response.datastorage.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)storage.set(REFRESH_TOKEN, result.refresh, 7 * 24 * 60 * 60 * 1000)storage.set(USER_INFO,result.userInfo,7 * 24 * 60 * 60 * 1000)commit('SET_INFO', result.userInfo)commit('SET_TOKEN', result.token)commit('SET_NAME', { name: result.userInfo.name, welcome: welcome() })resolve(response)}).catch(error => {reject(error)})})},

permission.js


router.beforeEach((to, from, next) => {NProgress.start() // start progress barto.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`)/* has token */console.log(store);if (storage.get(ACCESS_TOKEN) && storage.get(USER_INFO)) {  //是否存在token和UserInfo// 每次变动都存储到vuex中store.commit('SET_INFO', storage.get(USER_INFO))store.commit('SET_TOKEN', storage.get(ACCESS_TOKEN))store.commit('SET_NAME', { name: storage.get(USER_INFO).name, welcome: welcome() })next()} else {if (allowList.includes(to.name)) {// 在免登录名单，直接进入next()} else {next({ path: loginRoutePath, query: { redirect: to.fullPath } })NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it}}
})

去尝试吧。

Ant Design Pro Vue 登录后userInfo存在vuex问题相关推荐

ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon
一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...
Ant Desgin Pro 修改登录后默认导航到的位置
src/models/login.js 40行 yield put(routerRedux.replace(redirect || '/')); 修改/为需要的路径
同志们,免费版的Ant Design Pro Vue3 来啦
Vue3也出了一段时间了,于是照着ant pro vue搭个免费的vue3版希望大家喜欢基于 Vite2 Vue3 Ant-Design-of-Vue2 TS实现的 Ant Design Pro ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
搭建Vue版Ant Design Pro后台管理系统
搭建Vue版Ant Design Pro后台管理系统此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端相关文档链接 1.[Ant Design Pro of ...
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...

Ant Design Pro Vue 登录后userInfo存在vuex问题

问题描述：

作者发现使用Ant Design Pro中存在一个问题，页面刷新后vuex数据丢失，导致UserInfo找不到影响页面的问题，故而写此文，望能助有需之人。

原因分析：

解决方案：

Ant Design Pro Vue 登录后userInfo存在vuex问题相关推荐

最新文章

热门文章