From 35a3ab3b6b5a4cc2a9d14c59eb14bfede679f1a9 Mon Sep 17 00:00:00 2001 From: Wzp-2008 Date: Sun, 30 Apr 2023 13:07:37 +0800 Subject: [PATCH] feat: adding router and permission --- .env.development | 2 +- .env.production | 2 +- src/api/users/index.ts | 9 ++++++ src/api/users/types/users.ts | 12 ++++++++ src/router/index.ts | 6 ++-- src/store/modules/user.ts | 47 ++++++++++++++++--------------- src/views/order/manager/index.vue | 36 ++++++++++++++++++++--- src/views/store/index.vue | 4 ++- 8 files changed, 86 insertions(+), 32 deletions(-) diff --git a/.env.development b/.env.development index ee3cf4e..037293b 100644 --- a/.env.development +++ b/.env.development @@ -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' diff --git a/.env.production b/.env.production index 72e0237..e5a101b 100644 --- a/.env.production +++ b/.env.production @@ -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' diff --git a/src/api/users/index.ts b/src/api/users/index.ts index 51f648a..63536f8 100644 --- a/src/api/users/index.ts +++ b/src/api/users/index.ts @@ -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>>({ @@ -49,3 +51,10 @@ export function changeUserStatusApi(userid: number, newStatus: boolean) { withCredentials: true }) } +export function getUserInfoApi() { + return request>({ + url: "/account/getUserInfo", + method: "get", + withCredentials: true + }) +} diff --git a/src/api/users/types/users.ts b/src/api/users/types/users.ts index 46f70c2..23d2be1 100644 --- a/src/api/users/types/users.ts +++ b/src/api/users/types/users.ts @@ -13,3 +13,15 @@ export type IExChangeUserResponseData = string export type IChangeUserStatus = string export type IGetAllUserResponseData = IPageResponseData + +export interface IPermission { + permissionCode: string + permissionName: string +} +export interface IAccountInfo { + id: string + role: { + info: IPermission[] + } + roleName: string +} diff --git a/src/router/index.ts b/src/router/index.ts index 25ce3a7..25386d2 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -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" } } diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 0e27212..c1a5926 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -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 外使用 */ diff --git a/src/views/order/manager/index.vue b/src/views/order/manager/index.vue index c76958c..0c6ad75 100644 --- a/src/views/order/manager/index.vue +++ b/src/views/order/manager/index.vue @@ -49,12 +49,38 @@ @@ -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([]) const totalOrderCount = ref(1) const nowPage = ref(1) @@ -278,6 +305,7 @@ const changeStatusDialogShow = ref(false) const searchContent = ref("") const searchType = ref("WANG_ID") const searchMode = ref(false) +const user = useUserStore() const getColor = (row: IOrder): string => { switch (row.flag) { case 1: diff --git a/src/views/store/index.vue b/src/views/store/index.vue index 0039b3e..475e97f 100644 --- a/src/views/store/index.vue +++ b/src/views/store/index.vue @@ -14,7 +14,7 @@ - 添加商户 + 添加商户
@@ -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([]) const totalStoreCount = ref(1) const nowPage = ref(1) +const user = useUserStore() const handleChangePage = () => { getStoreApi(nowPage.value) .then((response) => {