基于Spring和Ant Design Pro在localStorage中存储数据

文章目录

    • 背景介绍
    • 实现功能
    • 后端实现(Spring)
    • 前端实现(Ant Design Pro)

背景介绍

在Web开发过程中,往往需要获取一些数据,比如用户登录后的用户名。以往前后端不分离的开发过程中,可以把这些数据放在session中获取,在HTML5中引入了LocalStorage,可以把数据存储在LocalStorage中。

Ant Design Pro是一款基于DVA的前端框架,当每个Web页面都需要获取一些不变的数据量时,使用DVA模式在每个页面connect对应的model比较繁琐,特别是类似用户名这些基本不变的数据,可以在网页读取LocalStoage直接获取。

实现功能

用户登录后,存储用户名、用户权限、区域列表、站点列表、当前站点这些数据到LocalStorage,格式类似:

 {
  user: 'admin',
  ownAreas: [1, 2, 3],
  currentSubstation: { id: '#1-substation', desc: '站点1' },
  substationList: [
    { id: '#1-substation', desc: '站点1' },
    { id: '#2-substation', desc: '站点2' },
  ],
  authority: 'admin',
  type: 'account',
};

后端实现(Spring)

后端API:http://localhost:8080/api/login/account
代码:

@RequestMapping(value = "/login/account", method = RequestMethod.POST)
    public ResponseEntity<Map<String, Object>> LoginAction(@RequestBody LoginAction loginAction) {
        Map<String, Object> data = new HashMap<>();
        String userName = loginAction.getUserName();
        String passWord = loginAction.getPassword();
        String status, currentAuthority;
        if (loginService.checkPassword(userName, passWord)) {
            status = "ok";
            currentAuthority = userName;
        } else {
            status = "error";
            currentAuthority = "guest";
        }
        data.put("status", status);
        data.put("currentAuthority", currentAuthority);
        data.put("type", loginAction.getType());

        SysAccount sysAccount = loginService.login(userName, passWord).getAccount();
        data.put("userName", userName);
        data.put("ownAreas", sysAccount.getAreas());
        Map<String, Object> currentSubstation = new HashMap<>();
        currentSubstation.put("id", scadaPSRService.getStation(sysAccount.getArea()).getId());
        currentSubstation.put("desc", scadaPSRService.getStation(sysAccount.getArea()).getName());
        data.put("currentSubstation", currentSubstation);

        List<Map<String, Object>> substations = new ArrayList<>();
        List<Integer> ownAreas = sysAccount.getAreas();
        if (ownAreas.size() > 0) {
            for (Integer area : ownAreas) {
                Map<String, Object> substationInformation = new HashMap<>();
                substationInformation.put("id", scadaPSRService.getStation(area).getId());
                substationInformation.put("desc", scadaPSRService.getStation(area).getName());
                substations.add(substationInformation);
            }
        }
        data.put("substationList", substations);
        return new ResponseEntity<>(data, HttpStatus.OK);
    }

返回类型可以是HashMap、自定义数据类和JsonObject,区别如下:

  • HashMap里面的中Value可以为空,对于这种只在登录时使用一次的数据组合可以采用HashMap实现,同时HashMap支持多种数据组合。
  • JsonObject类似HashMap,但是Value值不能为空。
  • 自定义数据类增加了代码量,如果程序中有其他地方使用这个类,那么可以单独定义,否则还是HashMap和JsonObject方便。

后端代码返回结果:
基于Spring和Ant Design Pro在localStorage中存储数据_第1张图片

前端实现(Ant Design Pro)

前端基于Ant Design Pro V2实现,关键代码如下:
models/login.js

 effects: {
 // 异步获取,accountLogin是自定义的接口,对应后端代码
    * login({ payload }, { call, put }) {
      const response = yield call(accountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
}     

//登陆后更新权限,payload是后端返回的值
  reducers: {
    changeLoginStatus(state, { payload }) {
      setAuthority(payload); //在这个方法中设置LocalStorage
      return {
        ...state,
        status: payload.status,
        type: payload.type,
      };
    },
  },

utils/authority.js

export function setAuthority(payload) {
  localStorage.setItem('currentAuthority', payload.currentAuthority);
  localStorage.setItem('user', payload.userName);
  localStorage.setItem('ownAreas', payload.ownAreas);
  localStorage.setItem('currentSubstation', JSON.stringify(payload.currentSubstation));
  localStorage.setItem('substationList', JSON.stringify(payload.substationList));
}

注意需要把Json对象转为Json字符串,使用JSON.stringify()方法

在chrome浏览器中观察localStorage:
基于Spring和Ant Design Pro在localStorage中存储数据_第2张图片

你可能感兴趣的:(Spring,工作总结,Spring,antd,javaScript,localStorage,Ant,Design,Pro)