项目业务＜Main部分 + 权限管理＞

效果展示

Vuex + TypeScript 知识补充

import { useStore } from "vuex"
const store = useStore()
// store --->>> any 类型

想对创建出来的store对象进行类型的约束，可以这样做

• 定义相关类型

// 模块内的state的类型
import type { LoginStateType } from "./login/types";
// 根模块内的state类型
export interface RootStateType {}
// 定义一个接口，集合展示模块内的类型
interface ModuleType {
  login: LoginStateType;
}
// 导出交叉类型
export type RootWithModule = RootStateType & ModuleType;

• router/index.ts

// ....省略相关代码
// 导入刚刚导出的类型
import { RootStateType, RootWithModule } from "./types";
// 重写 useStore 方法
import { createStore, useStore as useVuexStore, Store } from "vuex";
// 以后在使用的时候，使用本文件内的useStore方法
export function useStore(): Store<RootWithModule> {
  return useVuexStore();
}
// 这样可以有效对useStore方法得到的store对象，进行类型约束。

前端权限管理

方法一：不管什么角色登陆，在开发的时候，在前端都全部配置好路由的映射关系，只是在展示的时候，对应路由的跳转不展现出来。 引发的问题： 虽然页面没有展示，但是可以通过浏览器的地址栏进行 “套”，就会显示对应映射的组件，但组件上可能是没有什么东西的，虽然这样但也不好，会不安全。

方法二：在前端这里，为不同的角色设置好不同的映射关系（映射数组），请求数据用户的角色是什么，再把该角色的数组加入到 main 对应的 children 内。 引发问题： 若后端又有新的角色出现，那么前端这边也要跟着进行修改，重新进行部署。

方法三：在前端创建好所有路径对应的组件，但是根据后端返回的菜单数据，进行动态的生成路由。后端在返回对应的路径信息时，也要把该路径映射组件的路径一起返回。但是也要后端要增加一个字段，来放置组件的位置。

方法四：在前端创建好所有路径对应的组件，但是根据后端返回的菜单数据，进行动态的生成路由。后端在返回对应的路径信息时，在前端就设置好路径和组件之间的映射关系，在前端根据传过来的路径进行查找，查找到就找到了该路径和组件的映射关系。