记录一次登录相关bug

原因

我发现我的登录是有问题的，起初我是觉得是session的问题

下面先回顾一下页面的四种本地保存方式

链接

https://blog.csdn.net/YN2000609/article/details/131709478

大概的有四种，其中他们的存储时间分别是

IndexedDB 的数据存储时间最长，Local Storage 的数据存储时间次长，Cookie 的数据存储时间相对较长，而 Session Storage 的数据存储时间最短。

他们的存储失效界限是

indexeddb是没有 local storeage也是没有浏览器关闭还存着 cookie是自行设置时间，如果不设置时间就是刷新还有浏览器关闭就没 session是如果不设置时间是刷新就没

不巧我使用的就是session

我起初觉得是这个session的问题但是我这个框架内置了登录刷新的一些逻辑太多了我没有看所以就无脑把时间都加成了一个小时也就是把expires改成正常时间加一个小时。但是发现刷新之后还是没了，没了就是存储的用户名为空，我在想是哪里结果就发现是一段这样的代码

cpp 复制代码

  if (data.userId && data.roles) {
    console.log("如果都在")
    console.log(data.userId)
    const { userId, roles } = data;
    setSessionKey(userId, roles);
  } else {

    console.log(data)
    const userId =
      storageSession().getItem<DataInfo<number>>(sessionKey)?.userId ?? "";
    const roles =
      storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
    setSessionKey(userId, roles);
  }
}

把session里面的username改成了""也就是空，但是逻辑根本不对他是在用户名和权限其一不再的时候才运行的，然后想到我的roleid是0 会不会在if中被看作false 的存在，

改成

if (data.userId && data.roles != null) {

console.log("如果都在")

console.log(data.userId)

const { userId, roles } = data;

setSessionKey(userId, roles);

} else {

复制代码

console.log(data)
const userId =
  storageSession().getItem<DataInfo<number>>(sessionKey)?.userId ?? "";
const roles =
  storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
setSessionKey(userId, roles);

}

}果然就没运行了

错误原因

1 是接口返回的roles的值是number类型的而框架内都是以string形式存储的所以在返回数据的时候，数字0被当成了为空也就是false

2 刷新的逻辑和登录逻辑重叠不易维护

3 返回数据的时候前端期望后端返回的是username 但是后端偏偏返回了userid 就常常获取不到值

4 session不够持久化存储就一直每次刷新的时候重新获取不符合规范