wzp/Commerce-System-Frontend
1
0
Fork 0
generated from wzp/v3-admin-vite
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adding router and permission

Browse Source
This commit is contained in:
Wzp-2008 2023-04-30 13:07:37 +08:00
parent aa03f5f814
commit 35a3ab3b6b
8 changed files with 86 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -5,7 +5,7 @@ NODE_ENV = development
## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
# VITE_BASE_API = 'http://192.168.1.1:8001'
VITE_BASE_API = 'http://wzpmc.cn:8001'
VITE_BASE_API = 'http://wzpmc.cn:8002'
## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'

2
.env.production
View File

@ -4,7 +4,7 @@ NODE_ENV = production
# 下面是自定义的环境变量，可以修改（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
VITE_BASE_API = 'http://wzpmc.cn:8001'
VITE_BASE_API = 'http://wzpmc.cn:8002'
## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'

9
src/api/users/index.ts
View File

@ -2,12 +2,14 @@ import { request } from "@/utils/service"
import * as AxiosType from "axios"
import * as Requests from "@/api/types/requests"
import {
IAccountInfo,
IChangeUserStatus,
IDelUserResponseData,
IExChangeAccountRequestsData,
IExChangeUserResponseData,
IGetAllUserResponseData
} from "@/api/users/types/users"
import { AxiosResponseData } from "@/api/types/requests"
export function getAllUsersApi(page: number) {
return request<AxiosType.AxiosResponse<Requests.IResponseData<IGetAllUserResponseData>>>({
@ -49,3 +51,10 @@ export function changeUserStatusApi(userid: number, newStatus: boolean) {
withCredentials: true
})
}
export function getUserInfoApi() {
return request<AxiosResponseData<IAccountInfo>>({
url: "/account/getUserInfo",
method: "get",
withCredentials: true
})
}

12
src/api/users/types/users.ts
View File

@ -13,3 +13,15 @@ export type IExChangeUserResponseData = string
export type IChangeUserStatus = string
export type IGetAllUserResponseData = IPageResponseData<IAccount>
export interface IPermission {
permissionCode: string
permissionName: string
}
export interface IAccountInfo {
id: string
role: {
info: IPermission[]
}
roleName: string
}

6
src/router/index.ts
View File

@ -93,7 +93,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
meta: {
title: "商户管理",
elIcon: "Shop",
roles: ["admin"]
roles: ["add:store", "show:store"]
}
}
]
@ -133,7 +133,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
name: "CreateOrder",
meta: {
title: "创建订单",
roles: ["admin", "editor"],
roles: ["add:order"],
elIcon: "FolderAdd"
}
},
@ -143,7 +143,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
name: "ManagerOrder",
meta: {
title: "管理订单",
roles: ["admin"],
roles: ["show:order", "change:order"],
elIcon: "FolderChecked"
}
}

47
src/store/modules/user.ts
View File

@ -9,6 +9,7 @@ import { loginApi } from "@/api/login"
import { type ILoginRequestData } from "@/api/login/types/login"
import { type RouteRecordRaw } from "vue-router"
import asyncRouteSettings from "@/config/async-route"
import { getUserInfoApi } from "@/api/users"
export const useUserStore = defineStore("user", () => {
/** Token即用户id */
@ -42,27 +43,26 @@ export const useUserStore = defineStore("user", () => {
}
/** 获取用户详情 */
const getInfo = () => {
roles.value = asyncRouteSettings.defaultRoles
roles.value = ["admin"]
console.log("getInfo()")
// return new Promise((resolve, reject) => {
// getUserInfoApi()
// .then((res) => {
// const data = res.data
// username.value = data.username
// // 验证返回的 roles 是否是一个非空数组
// if (data.roles && data.roles.length > 0) {
// roles.value = data.roles
// } else {
// // 塞入一个没有任何作用的默认角色，不然路由守卫逻辑会无限循环
// roles.value = asyncRouteSettings.defaultRoles
// }
// resolve(res)
// })
// .catch((error) => {
// reject(error)
// })
// })
return new Promise((resolve, reject) => {
getUserInfoApi()
.then((res) => {
const data = res.data
username.value = data.data.roleName
// 验证返回的 roles 是否是一个非空数组
if (data.data.role.info && data.data.role.info.length > 0) {
for (const iPermission of data.data.role.info) {
roles.value.push(iPermission.permissionCode)
}
} else {
// 塞入一个没有任何作用的默认角色，不然路由守卫逻辑会无限循环
roles.value = asyncRouteSettings.defaultRoles
}
resolve(res)
})
.catch((error) => {
reject(error)
})
})
}
/** 切换角色 */
const changeRoles = async (role: string) => {
@ -94,8 +94,11 @@ export const useUserStore = defineStore("user", () => {
tagsViewStore.delAllVisitedViews()
tagsViewStore.delAllCachedViews()
}
const hasRole = (role: string): boolean => {
return roles.value.some((e) => e === role)
}
return { token, roles, username, setRoles, login, getInfo, changeRoles, logout, resetToken }
return { token, roles, username, setRoles, login, getInfo, changeRoles, logout, resetToken, hasRole }
})
/** 在 setup 外使用 */

36
src/views/order/manager/index.vue
View File

@ -49,12 +49,38 @@
<el-table-column prop="sku" label="SKU" width="300px" />
<el-table-column fixed="right" label="操作" width="210px">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleExchangeButtonClick(scope.row)">修改</el-button>
<el-button link type="primary" size="small" @click="handleChangeStatusButtonClick(scope.row)"
<el-button
link
type="primary"
size="small"
@click="handleExchangeButtonClick(scope.row)"
v-if="user.hasRole('change:order')"
>修改</el-button
>
<el-button
link
type="primary"
size="small"
@click="handleChangeStatusButtonClick(scope.row)"
v-if="user.hasRole('change:order')"
>修改状态</el-button
>
<el-button link type="primary" size="small" @click="handleFlagButtonClick(scope.row)">插旗</el-button>
<el-button link type="primary" size="small" @click="handleRemoveButtonClick(scope.row)">删除</el-button>
<el-button
link
type="primary"
size="small"
@click="handleFlagButtonClick(scope.row)"
v-if="user.hasRole('change:order')"
>插旗</el-button
>
<el-button
link
type="primary"
size="small"
@click="handleRemoveButtonClick(scope.row)"
v-if="user.hasRole('change:order')"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -233,6 +259,7 @@ import {
import { Flag, Search } from "@element-plus/icons-vue"
import * as AxiosType from "axios/index"
import { IPageResponseData, IResponseData, pageSize } from "@/api/types/requests"
import { useUserStore } from "@/store/modules/user"
const tableShowData = ref<IOrder[]>([])
const totalOrderCount = ref<number>(1)
const nowPage = ref<number>(1)
@ -278,6 +305,7 @@ const changeStatusDialogShow = ref<boolean>(false)
const searchContent = ref<string>("")
const searchType = ref<ISearchType>("WANG_ID")
const searchMode = ref<boolean>(false)
const user = useUserStore()
const getColor = (row: IOrder): string => {
switch (row.flag) {
case 1:

4
src/views/store/index.vue
View File

@ -14,7 +14,7 @@
<!-- <el-button :icon="Search" @click="search" />-->
<!-- </template>-->
<!-- </el-input>-->
<el-button type="warning" @click="handleAddStoreButtonClick">添加商户</el-button>
<el-button type="warning" @click="handleAddStoreButtonClick" v-if="user.hasRole('add:store')">添加商户</el-button>
</div>
<div class="storeManagerTableDiv">
<el-table :data="tableShowData" style="width: 100%" table-layout="auto">
@ -58,10 +58,12 @@ import { IStore } from "@/api/store/types/store"
import { addStoreApi, changeStoreStatusApi, getStoreApi } from "@/api/store"
import { ElMessage, ElMessageBox } from "element-plus"
import { pageSize } from "@/api/types/requests"
import { useUserStore } from "@/store/modules/user"
const tableShowData = ref<IStore[]>([])
const totalStoreCount = ref<number>(1)
const nowPage = ref<number>(1)
const user = useUserStore()
const handleChangePage = () => {
getStoreApi(nowPage.value)
.then((response) => {