前端开发学习网站_邯郸市住房和城乡建设局官网_在线查网站的ip地址_seo查询官网

1.获取用户信息

1.1封装接口

后端有根据id获取用户信息的接口，前端需要把该接口封装一下:
service/login/login.ts：

import hyRequest from '..'
import type { IAccount } from '@/types'
import { localCache } from '@/utils/cache'
import { LOGIN_TOKEN } from '@/global/constants'
export function getUserInfoById(id: number) {return hyRequest.get({url: `/users/${id}`headers: {Authorization: 'Bearer ' + localCache.getCache(LOGIN_TOKEN)}})
}

store/login/login.ts：

...
async loginAccountAction(account: IAccount) {// 1.账号登录, 获取token等信息const loginResult = await accountLoginRequest(account)const id = loginResult.data.idthis.token = loginResult.data.tokenlocalCache.setCache(LOGIN_TOKEN, this.token)// 2.获取登录用户的详细信息(role信息)const userInfoResult = await getUserInfoById(id)const userInfo = userInfoResult.datathis.userInfo = userInfo// 3.根据角色请求用户的权限(菜单menus)...// 4.进行本地缓存localCache.setCache('userInfo', userInfo)...// 5.页面跳转(main页面)router.push('/main')}}

1.2优化

如果所有需要token的接口都像上面一样封装，这样子太麻烦，所以最好把token的处理放在请求拦截器中更好。

service/index.ts：

import { LOGIN_TOKEN } from '@/global/constants'
import { localCache } from '@/utils/cache'
import { BASE_URL, TIME_OUT } from './config'
import HYRequest from './request'const hyRequest = new HYRequest({baseURL: BASE_URL,timeout: TIME_OUT,interceptors: {requestSuccessFn: (config) => {// 每一个请求都自动携带tokenconst token = localCache.getCache(LOGIN_TOKEN)if (config.headers && token) {// 类型缩小config.headers.Authorization = 'Bearer ' + token}return config}}
})
export default hyRequest

2.获取用户的菜单树信息

service/login/login.ts:

import hyRequest from '..'
import type { IAccount } from '@/types'export function accountLoginRequest(account: IAccount) {return hyRequest.post({url: '/login',data: account})
}export function getUserInfoById(id: number) {return hyRequest.get({url: `/users/${id}`})
}export function getUserMenusByRoleId(id: number) {return hyRequest.get({url: `/role/${id}/menu`})
}

store/login/login.ts：

import { defineStore } from 'pinia'
import {accountLoginRequest,getUserInfoById,getUserMenusByRoleId
} from '@/service/login/login'
import type { IAccount } from '@/types'
import { localCache } from '@/utils/cache'
import router from '@/router'
import { LOGIN_TOKEN } from '@/global/constants'interface ILoginState {token: string//这里userInfo和usermenus也可以定义接口。如果数据很复杂，嵌套很多层,也可以定义为anyuserInfo: anyuserMenus: any
}const useLoginStore = defineStore('login', {// 如何制定state的类型state: (): ILoginState => ({token: localCache.getCache(LOGIN_TOKEN) ?? '',userInfo: localCache.getCache('userInfo') ?? {},userMenus: localCache.getCache('userMenus') ?? []}),actions: {async loginAccountAction(account: IAccount) {// 1.账号登录, 获取token等信息const loginResult = await accountLoginRequest(account)const id = loginResult.data.idthis.token = loginResult.data.tokenlocalCache.setCache(LOGIN_TOKEN, this.token)// 2.获取登录用户的详细信息(role信息)const userInfoResult = await getUserInfoById(id)const userInfo = userInfoResult.datathis.userInfo = userInfo// 3.根据角色请求用户的权限(菜单menus)const userMenusResult = await getUserMenusByRoleId(this.userInfo.role.id)const userMenus = userMenusResult.datathis.userMenus = userMenus// 4.进行本地缓存localCache.setCache('userInfo', userInfo)localCache.setCache('userMenus', userMenus)// 5.页面跳转(main页面)router.push('/main')}}
})export default useLoginStore

获取到用户的详细信息和菜单树信息之后,接下来就是根据这些数据进行前端搭建了。具体搭建比较简单，这里就不多说。文章的主要目的是讲述一些功能的思路和vue3+ts的编码规范(和vue2很多地方不太一样)。