携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

前端登录补充

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

前端登录

上一节，我们在后端 补充了 登录注册 的一个逻辑

但是接口没有变化，还是我们之前的接口

不过需要我们前端在 登录 成功后，做一些逻辑上的处理

登录完成

之前登录完成后，我们只是保存了，返回来的 token

现在接口返回的内容更新了，前端也要进行更新

• 首先是将返回的 用户详细信息 user 字段进行保存

• 其次是里面的 角色id列表 信息，roleArrId

• 将上面两个都存在 Pinia 中

在文件位置： src\store\modules\user.ts 里面，新增 用户信息 和 角色信息

export const useUserStore = defineStore('user', {
state: () => {
    return {
      token: '',
      roles: [],
      menus: [], // 菜单
      menusTree: [], // 菜单树
      user: {}, // 用户信息
    }
  }
})
getters: {
    getRoles: (state) => state.roles,
},
actions: {
    SetUser(user) {
      this.user = user
    },

    SetRoles(roles) {
      this.roles = roles
    },
}

在文件位置： src\views\login\index.vue 里面，新增我们的 登录完成后 的逻辑

userStore.SetToken(token)
userStore.SetUser(user)
userStore.SetRoles(user.roleArrId)

至此上述 登录 获取用户的详细信息，已经完成，但是这里有留下来一个 隐藏的bug问题 ，影响还是很大的。

可以先猜一下！

提示：存在于 Pinia 中的一个问题

问题

那就是 数据持久化 存储 问题

由于我们将数据存放在 Pinia 中，自然就会导致这样子的一个问题

就是我们登录完成后，此时刷新页面，我们 Pinia 中的数据会消失，但是呢，网页并没有跳转到登录页面。

是因为我们的 token 还存在

但是我们存储的 用户的信息 以及 角色的信息 都会被清空

所以一种方式是，放到 localstorage 中，

另一种方式就是请求后端，下一节我们开新接口，来处理请求逻辑

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

完成了 前端登录后，保存 用户的详细信息，以及 角色信息