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

背景介绍

在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方便。

后端代码返回结果：

前端实现（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: