我们需要实现一个用户列表，效果如下，接口数据如下
首先新建文件 ums/admin
html
<template>
<div class=''>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="编号"/>
<el-table-column prop="username" label="账号"/>
<el-table-column prop="nickName" label="姓名"/>
<el-table-column prop="email" label="邮箱"/>
<el-table-column prop="createTime" label="添加时间"/>
<el-table-column prop="loginTime" label="最后登录"/>
<el-table-column prop="status" label="是否启用"/>
<el-table-column label="操作"></el-table-column>
</el-table>
</div>
</template>
<script lang='ts' setup>
import { reactive, toRefs } from 'vue'
import { getAdminListApi } from '@/api/ums'
import { ElMessage } from 'element-plus'
const state = reactive<{
tableData: {}[]
}>({
tableData: []
})
let { tableData } = toRefs(state)
getAdminListApi({
keyword: '',
pageNum: 1,
pageSize: 10
}).then((res) => {
if(res.code === 200) {
tableData.value = res.data.list
} else {
ElMessage.error('获取用户数据列表失败')
}
})
</script>
<style lang='less' scoped>
</style>添加 api/ums.ts
ts
import request from './request'
interface ManageResponse<T = null> {
code: number
message: string
data: T
}
type PromiseResponse<T> = Promise<ManageResponse<T>>
interface AdminListParams {
keyword: string
pageNum: number
pageSize: number
}
interface AdminListResponse {
list: {}[]
pageNum: number
pageSize: number
total: number
totalPage: number
}
// 获取用户数据列表
export const getAdminListApi = (data: AdminListParams):PromiseResponse<AdminListResponse> => {
return request.get('/admin/list', {
params: data
})
}调整一下这个mock里面的文件，分一下模块，以及抽离一下校验的token方法
utils.ts
ts
// token有效期：1小时
const TOKEN_EXPIRE_DURATION = 60 * 60 * 1000
// 登录接口返回的token前缀
export const TOKEN_PREFIX = 'mock_token_'
// 根据token解析出颁发时间戳
const extractTokenIssueTime = (token: string) => {
// token必须是`mock_token_<timestamp>`格式，否则视为非法
if (!token.startsWith(TOKEN_PREFIX)) return null
const ts = Number(token.replace(TOKEN_PREFIX, ''))
return Number.isFinite(ts) ? ts : null
}
// 校验headers中的Authorization token是否有效
export const validateToken = (headers: Record<string, string>) => {
// 约定从Authorization中读取token
// console.log('headers---->', headers)
const token = headers.authorization || headers.Authorization
const issueTime = token ? extractTokenIssueTime(token) : null
// console.log('issueTime---->', issueTime)
if (!token || !issueTime || Date.now() - issueTime > TOKEN_EXPIRE_DURATION) {
return {
valid: false,
response: {
code: 401,
message: '登录信息已过期，请重新登录',
data: null
}
}
}
return { valid: true }
}login.ts
ts
import { type MockMethod } from 'vite-plugin-mock'
import { validateToken, TOKEN_PREFIX } from '../utils'
export default [
{
url: '/api/admin/login',
method: 'post',
response: ({ body }: { body: { username: string; password: string } }) => {
const { username, password } = body
// 模拟登录验证
if (username === 'admin' && password === '123456') {
return {
code: 200,
message: '登录成功',
data: {
token: TOKEN_PREFIX + Date.now()
}
}
} else {
return {
code: 401,
message: '用户名或密码错误',
data: null
}
}
}
},
{
url: '/api/admin/info',
method: 'get',
response: ({ headers }: { headers: Record<string, string> }) => {
const tokenCheck = validateToken(headers)
if (!tokenCheck.valid) {
return tokenCheck.response
}
return {
code: 200,
message: '获取用户信息成功',
data: {
menus: [
{
id: '1',
icon: '',
createTime: '',
hidden: 0,
level: 0,
name: 'pms',
parentId: '0',
sort: 1,
title: '商品'
},
{
id: '1-1',
icon: '',
createTime: '',
hidden: 0,
level: 1,
name: 'product',
parentId: '1',
sort: 0,
title: '商品列表'
},
{
id: '1-2',
icon: '',
createTime: '',
hidden: 0,
level: 2,
name: 'addProduct',
parentId: '1',
sort: 0,
title: '添加商品'
},
{
id: '2',
icon: '',
createTime: '',
hidden: 0,
level: 0,
name: 'oms',
parentId: '0',
sort: 2,
title: '订单'
},
{
id: '2-1',
icon: '',
createTime: '',
hidden: 0,
level: 1,
name: 'orderList',
parentId: '2',
sort: 0,
title: '订单列表'
},
{
id: '2-2',
icon: '',
createTime: '',
hidden: 0,
level: 2,
name: 'orderDetail',
parentId: '2',
sort: 0,
title: '订单详情'
},
{
id: '3',
icon: '',
createTime: '',
hidden: 0,
level: 0,
name: 'sms',
parentId: '0',
sort: 3,
title: '营销'
},
{
id: '3-1',
icon: '',
createTime: '',
hidden: 0,
level: 1,
name: 'subject',
parentId: '3',
sort: 0,
title: '营销主题'
},
{
id: '3-2',
icon: '',
createTime: '',
hidden: 0,
level: 2,
name: 'advertise',
parentId: '3',
sort: 0,
title: '广告营销'
},
{
id: '4',
icon: '',
createTime: '',
hidden: 0,
level: 0,
name: 'ums',
parentId: '0',
sort: 3,
title: '权限'
},
{
id: '4-1',
icon: '',
createTime: '',
hidden: 0,
level: 1,
name: 'role',
parentId: '4',
sort: 0,
title: '角色管理'
},
{
id: '4-2',
icon: '',
createTime: '',
hidden: 0,
level: 1,
name: 'admin',
parentId: '4',
sort: 0,
title: '用户列表'
}
]
}
}
}
}
] as MockMethod[]ums.ts
ts
import { type MockMethod } from 'vite-plugin-mock'
import { validateToken } from '../utils'
export default [
{
url: '/api/admin/list',
method: 'get',
response: ({ headers }: { headers: Record<string, string> }) => {
const tokenCheck = validateToken(headers)
if (!tokenCheck.valid) {
return tokenCheck.response
}
return {
code: 200,
message: '获取用户数据列表',
data: {
list: [
{
createTime: '2018-09-29T05:55:39.000+00:00',
email: 'kaimo313@foxmail.com',
icon: '',
id: 1,
loginTime: '2018-09-29T05:55:39.000+00:00',
nickName: '超级管理员',
note: '超级管理员',
password: '123456',
status: 1, // 是否启用 1启用 0禁用
username: 'admin'
},
{
createTime: '2018-09-29T05:55:39.000+00:00',
email: 'kaimo313@foxmail.com',
icon: '',
id: 2,
loginTime: '2018-09-29T05:55:39.000+00:00',
nickName: '凯小默',
note: '凯小默的笔记',
password: '123456',
status: 0, // 是否启用 1启用 0禁用
username: 'kaimo'
}
],
pageNum: 1,
pageSize: 10,
total: 2,
totalPage: 1,
}
}
}
}
] as MockMethod[]