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

前端页面刷新

引言

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

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

前端页面刷新

上一节，我们处理了 当前用户信息，能够根据请求头中的 token，来知道当前请求的用户，并且暴露出请求用户详细信息的 API 接口

这一节，我们处理在前端页面刷新时，该在哪里调用这个 API 接口

用户刷新页面，会先到 vue-router 的 前置路由守卫 中
此时判断 Pinia 中的用户角色信息，是否存在
- 存在：则说明页面并没有刷新，只是一个路由的切换
- 不存在：说明是用户进行了刷新操作
此时就要去请求用户信息的 info 接口，来得到用户 详细信息 ，以及用户所属的角色
将其保存在 Pinia 中

代码

首先在前端位置：src\api\user\index.ts 文件中，先把我们需要请求的 info 接口给定义出来

const API = {
  info: '/info',
}

/** 获取用户详细信息 */
export const getUserInfo = (data: any) => GET(commonAPI + prefix + API.info, data)

之后在 前置路由守卫 中进行判断，是否存在 token

  router.beforeEach((to, from, next) => {
    if (token) {
      if (to.name === 'login') {
        next({ path: 'workbench' })
      } else {
        // 角色不存在的话，就去请求用户信息
        setUserRoles().then(() => {
            // TODO
        })
      }
    }
  })
}

存在 token 后，我们判断角色是否存在

存在，则直接进行跳转
不存在
- 我们需要请求 用户信息 的操作
- 保存 用户信息 以及 角色信息
- 进行下一步操作

import { loginStore, useUserStore } from '@/store'
import { getUserInfo } from '@/api'

const userStore = useUserStore()

 const setUserRoles = () => {
    return new Promise((resolve, reject) => {
      if (Object.keys(userStore.getRoles).length) {
        resolve({})
      } else {
        getUserInfo({}).then((res: any) => {
          const user = res.user
          userStore.SetUser(user)
          userStore.SetRoles(user.roleArrId)

          resolve({})
        })
      }
    })
  }

至此，我们前端页面刷新了，也能够及时的获取到 用户的信息 和 角色信息

后面就可以进行 动态菜单 的配置了

总结

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

完成了 前端页面刷新 的逻辑处理

后台项目 Express-Mysql-Vue3-TS-Pinia 前端页面刷新

前端页面刷新

引言

前端页面刷新

代码

总结