diff --git a/package.json b/package.json index de20c7c..2bb4d76 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "echarts": "^5.4.1", "element-plus": "2.3.1", "js-cookie": "^3.0.5", + "nprogress": "^0.2.0", "pinia": "^2.1.7", + "progress": "^2.0.3", "sass": "^1.58.3", "uuid": "^9.0.1", "vant": "^4.8.3", diff --git a/permisstion.ts b/permisstion.ts new file mode 100644 index 0000000..2e3655c --- /dev/null +++ b/permisstion.ts @@ -0,0 +1,74 @@ +//路由鉴权:鉴权,项目当中路由能不能被的权限的设置(某一个路由什么条件下可以访问、什么条件下不可以访问) +import router from './src/router' +//@ts-ignore +import nprogress from 'nprogress' +//引入进度条样式 +import 'nprogress/nprogress.css' +/*nprogress.configure({ showSpinner: false }) +//获取用户相关的小仓库内部token数据,去判断用户是否登录成功 +import useUserStore from './store/modules/user' +import pinia from './store' +const userStore = useUserStore(pinia)*/ +//全局守卫:项目当中任意路由切换都会触发的钩子 +//全局前置守卫 +router.beforeEach(async (to: any, from: any, next: any) => { + nprogress.start(); + next(); +} + /*document.title = `${setting.title} - ${to.meta.title}` + //to:你将要访问那个路由 + //from:你从来个路由而来 + //next:路由的放行函数 + nprogress.start() + //获取token,去判断用户登录、还是未登录 + const token = userStore.token + //获取用户名字 + const username = userStore.username + //用户登录判断 + if (token) { + //登录成功,访问login,不能访问,指向首页 + if (to.path == '/login') { + next({ path: '/' }) + } else { + //登录成功访问其余六个路由(登录排除) + //有用户信息 + if (username) { + //放行 + next() + } else { + //如果没有用户信息,在守卫这里发请求获取到了用户信息再放行 + try { + //获取用户信息 + await userStore.userInfo() + //放行 + //万一:刷新的时候是异步路由,有可能获取到用户信息、异步路由还没有加载完毕,出现空白的效果 + next({ ...to }) + } catch (error) { + //token过期:获取不到用户信息了 + //用户手动修改本地存储token + //退出登录->用户相关的数据清空 + await userStore.userLogout() + next({ path: '/login', query: { redirect: to.path } }) + } + } + } + } else { + //用户未登录判断 + if (to.path == '/login') { + next() + } else { + next({ path: '/login', query: { redirect: to.path } }) + } + } +}*/) +//全局后置守卫 +router.afterEach((to: any, from: any) => { + nprogress.done() +}) + +//第一个问题:任意路由切换实现进度条业务 ---nprogress +//第二个问题:路由鉴权(路由组件访问权限的设置) +//全部路由组件:登录|404|任意路由|首页|数据大屏|权限管理(三个子路由)|商品管理(四个子路由) + +//用户未登录:可以访问login,其余六个路由不能访问(指向login) +//用户登录成功:不可以访问login[指向首页],其余的路由可以访问 diff --git a/src/api/acl/login.ts b/src/api/acl/login.ts index ed4dd63..5e9b880 100644 --- a/src/api/acl/login.ts +++ b/src/api/acl/login.ts @@ -1,11 +1,12 @@ import axios from "axios"; import * as other from "@/utils/other"; -import {HOST} from "@/utils/request"; +import {get, HOST, post} from "@/utils/request"; import {ElMessage} from "element-plus"; const FORM_CONTENT_TYPE = 'application/x-www-form-urlencoded'; const registerUrl = "/admin/register/user" + export const login = (data: any) => { return new Promise(resolve => { const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_PASSWORD_CLIENT); diff --git a/src/api/acl/user/index.ts b/src/api/acl/user/index.ts index ce37782..6638504 100644 --- a/src/api/acl/user/index.ts +++ b/src/api/acl/user/index.ts @@ -1,53 +1,24 @@ /* -//用户管理模块的接口 +//统一管理咱们项目用户相关的接口 import request from '@/utils/request' import type { - UserResponseData, - User, - AllRoleResponseData, - SetRoleData, + loginFormData, + loginResponseData, + userInfoReponseData, } from './type' -//枚举地址 +//项目用户相关的请求地址 enum API { - //获取全部已有用户账号信息 - ALLUSER_URL = '/admin/acl/user/', - //添加一个新的用户账号 - ADDUSER_URL = '/admin/acl/user/save', - //更新已有的用户账号 - UPDATEUSER_URL = '/admin/acl/user/update', - //获取全部职位,当前账号拥有的职位接口 - ALLROLEURL = '/admin/acl/user/toAssign/', - //给已有的用户分配角色接口 - SETROLE_URL = '/admin/acl/user/doAssignRole', - //删除某一个账号 - DELETEUSER_URL = '/admin/acl/user/remove/', - //批量删除的接口 - DELETEALLUSER_URL = '/admin/acl/user/batchRemove', + LOGIN_URL = '/admin/acl/index/login', + USERINFO_URL = '/admin/acl/index/info', + LOGOUT_URL = '/admin/acl/index/logout', } -//获取用户账号信息的接口 -export const reqUserInfo = (page: number, limit: number, username: string) => - request.get( - API.ALLUSER_URL + `${page}/${limit}/?username=${username}`, - ) -//添加用户与更新已有用户的接口 -export const reqAddOrUpdateUser = (data: User) => { - //携带参数有ID更新 - if (data.id) { - return request.put(API.UPDATEUSER_URL, data) - } else { - return request.post(API.ADDUSER_URL, data) - } -} -//获取全部职位以及包含当前用户的已有的职位 -export const reqAllRole = (userId: number) => - request.get(API.ALLROLEURL + userId) -//分配职位 -export const reqSetUserRole = (data: SetRoleData) => - request.post(API.SETROLE_URL, data) -//删除某一个账号的信息 -export const reqRemoveUser = (userId: number) => - request.delete(API.DELETEUSER_URL + userId) -//批量删除的接口 -export const reqSelectUser = (idList: number[]) => - request.delete(API.DELETEALLUSER_URL, { data: idList }) + +//登录接口 +export const reqLogin = (data: loginFormData) => + request.post(API.LOGIN_URL, data) +//获取用户信息 +export const reqUserInfo = () => + request.get(API.USERINFO_URL) +//退出登录 +export const reqLogout = () => request.post(API.LOGOUT_URL) */ diff --git a/src/api/acl/user/type.ts b/src/api/acl/user/type.ts index e5a486a..52ed141 100644 --- a/src/api/acl/user/type.ts +++ b/src/api/acl/user/type.ts @@ -1,55 +1,31 @@ /* -//账号信息的ts类型 +//定义用户相关数据的ts类型 +//用户登录接口携带参数的ts类型 +export interface loginFormData { + username: string + password: string +} + +//定义全部接口返回数据都拥有ts类型 export interface ResponseData { code: number message: string ok: boolean } -//代表一个账号信息的ts类型 -export interface User { - id?: number - createTime?: string - updateTime?: string - username?: string - password?: string - name?: string - phone?: null - roleName?: string -} -//数组包含全部的用户信息 -export type Records = User[] -//获取全部用户信息接口返回的数据ts类型 -export interface UserResponseData extends ResponseData { - data: { - records: Records - total: number - size: number - current: number - pages: number - } + +//定义登录接口返回数据类型 +export interface loginResponseData extends ResponseData { + data: string } -//代表一个职位的ts类型 -export interface RoleData { - id?: number - createTime?: string - updateTime?: string - roleName: string - remark: null -} -//全部职位的列表 -export type AllRole = RoleData[] -//获取全部职位的接口返回的数据ts类型 -export interface AllRoleResponseData extends ResponseData { +//定义获取用户信息返回数据类型 +export interface userInfoReponseData extends ResponseData { data: { - assignRoles: AllRole - allRolesList: AllRole + routes: string[] + buttons: string[] + roles: string[] + name: string + avatar: string } } - -//给用户分配职位接口携带参数的ts类型 -export interface SetRoleData { - roleIdList: number[] - userId: number -} */ diff --git a/src/main.ts b/src/main.ts index 12d5d89..bde8ec4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,8 +12,9 @@ import TableAbility from '@/components/table-ability.vue' import 'element-plus/dist/index.css'; import './assets/css/global.scss'; import './assets/font/iconfont.css'; -import '@/assets/css/custom-element.scss' -import '@/assets/css/animastore.css' +import '@/assets/css/custom-element.scss'; +import '@/assets/css/animastore.css'; +import '../permisstion'; // import '@/utils/debugger' diff --git a/src/router/routes.ts b/src/router/routes.ts index 7cb8054..047133e 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -110,7 +110,7 @@ export const constantRoute=[ }, { path: '/logs-manage', - name: '日志管理', + name: '系统管理', redirect: '/logs-manage/message-manage', component: () => import('@/views/logs-manage/index.vue'), children: [ diff --git a/src/static-data/menu.ts b/src/static-data/menu.ts index 5d98da1..ccb503c 100644 --- a/src/static-data/menu.ts +++ b/src/static-data/menu.ts @@ -111,7 +111,7 @@ export const getMenuData = () => { }) menu.push({ id: '5', - menuName: '日志管理', + menuName: '系统管理', order: 1, icon: 'icon-setting', route: '/logs-manage', diff --git a/src/utils/request.ts b/src/utils/request.ts index 41ae871..98d8a4f 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -18,17 +18,11 @@ export const get = (url: any, params: any, success: any) => { success(err); }); }; -export const post = (url: any, params: any, success: any) => { - axios.post(HOST + url, params) - .then(res => { - success(res); - }) - .catch(err => { - success(err); - }); +export const post = (url: any, params: any, config?: any) => { + return axios.post(HOST + url, params, config); }; export const getMapJson = (name: string) => { - return axios.post(BASE_URL+'/static/json/' + name) + return axios.post(BASE_URL + '/static/json/' + name) } export const getData = (url: string, params?: any) => { return axios.get(url, params) diff --git a/src/views/index.vue b/src/views/index.vue index 6651388..3d34ce6 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -85,14 +85,14 @@ switch (userInfo.permissions) { menus.push({ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' }) menus.push({ label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang' }) menus.push({ label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli' }) - menus.push({ label: '日志管理', path: '/logs-manage', icon: 'icon-setting' }) + menus.push({ label: '系统管理', path: '/logs-manage', icon: 'icon-setting' }) break; case '高级管理员': menus.push({ label: '首页', path: '/home', icon: 'icon-shouye' }) menus.push({ label: '权限管理', path: '/permissions-manage', icon: 'icon-users' }) menus.push({ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' }) menus.push({ label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang' }) - menus.push({ label: '日志管理', path: '/logs-manage', icon: 'icon-setting' }) + menus.push({ label: '系统管理', path: '/logs-manage', icon: 'icon-setting' }) break; case '中级管理员': menus.push({ label: '首页', path: '/home', icon: 'icon-shouye' }) diff --git a/src/views/login/login.vue b/src/views/login/login.vue index 6105bf2..1cf2142 100644 --- a/src/views/login/login.vue +++ b/src/views/login/login.vue @@ -66,7 +66,7 @@ - + @@ -162,18 +162,18 @@ const validatorUserName = (rule: any, value: any, callback: any) => { //value:即为表单元素文本内容 //函数:如果符合条件callBack放行通过即为 //如果不符合条件callBack方法,注入错误提示信息 - if (value.length >= 4) { + if (/^[a-zA-Z0-9_-]{4,16}$/) { callback(); } else { - callback(new Error('账号长度至少4位')); + callback(new Error('账号长度4到16位(字母,数字,下划线,减号)')); } } const validatorPassword = (rule: any, value: any, callback: any) => { - if (value.length >= 6) { + if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/) { callback(); } else { - callback(new Error('密码长度至少6位')); + callback(new Error('密码最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符')); } } @@ -324,22 +324,24 @@ const sendCode = () => { }, 1000); } const login = async (type: string) => { + //加载效果:开始加载 + loading.value=true; const obj = loginParams.value if (!currentHospital.value) { ElMessage.warning('请在右上角选择院区') return } + //保证全部表单正常再发请求 await loginFormRef.value.validate((valid: any, fields: any) => { if (valid) { // console.log('submit!') - sliderVConf.value.isShowSelf = true + sliderVConf.value.isShowSelf = true; } else { // console.log('error submit!', fields) + } - //加载效果:开始加载 - loading.value = true; /*try { //保证登录成功 @@ -364,8 +366,7 @@ const login = async (type: string) => { })*/ }) - //登录成功加载效果也消失 - loading.value = false; + } function getCaptchaCode() { @@ -399,7 +400,6 @@ const toHome = () => { title: `HI,${getTime()}好` }); - const getPermissions = () => { let permissions = '普通用户' switch (loginParams.value.account) { diff --git a/src/views/patients-manage/patients-manage.vue b/src/views/patients-manage/patients-manage.vue index c4941a6..5acc80b 100644 --- a/src/views/patients-manage/patients-manage.vue +++ b/src/views/patients-manage/patients-manage.vue @@ -16,7 +16,7 @@
- 新增 + 导入 删除
diff --git a/vite.config.ts b/vite.config.ts index 3807f42..da944d9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -23,13 +23,15 @@ export default defineConfig({ server: { proxy: { '/api': { - target: 'http://localhost:9999', // 目标服务器地址 + //target: 'http://192.168.137.235:9999', // 目标服务器地址 + target: 'http://192.168.71.44:9999', // 目标服务器地址 ws: true, // 是否启用 WebSocket changeOrigin: true, // 是否修改请求头中的 Origin 字段 rewrite: (path) => path.replace(/^\/api/, ''), }, '/socket.io': { - target: 'ws://localhost:9999', + //target: 'ws://192.168.137.235:9999', + target: 'ws://192.168.71.44:9999', ws: true, changeOrigin: true, rewrite: (path) => path.replace(/^\/socket.io/, ''),