路由进度条

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",

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[指向首页],其余的路由可以访问

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);

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<any, UserResponseData>(
-        API.ALLUSER_URL + `${page}/${limit}/?username=${username}`,
-    )
-//添加用户与更新已有用户的接口
-export const reqAddOrUpdateUser = (data: User) => {
-    //携带参数有ID更新
-    if (data.id) {
-        return request.put<any, any>(API.UPDATEUSER_URL, data)
-    } else {
-        return request.post<any, any>(API.ADDUSER_URL, data)
-    }
-}
-//获取全部职位以及包含当前用户的已有的职位
-export const reqAllRole = (userId: number) =>
-    request.get<any, AllRoleResponseData>(API.ALLROLEURL + userId)
-//分配职位
-export const reqSetUserRole = (data: SetRoleData) =>
-    request.post<any, any>(API.SETROLE_URL, data)
-//删除某一个账号的信息
-export const reqRemoveUser = (userId: number) =>
-    request.delete<any, any>(API.DELETEUSER_URL + userId)
-//批量删除的接口
-export const reqSelectUser = (idList: number[]) =>
-    request.delete(API.DELETEALLUSER_URL, { data: idList })
+
+//登录接口
+export const reqLogin = (data: loginFormData) =>
+    request.post<any, loginResponseData>(API.LOGIN_URL, data)
+//获取用户信息
+export const reqUserInfo = () =>
+    request.get<any, userInfoReponseData>(API.USERINFO_URL)
+//退出登录
+export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)
 */

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
-}
 */

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'
 

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: [

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',

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)

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' })

src/views/login/login.vue

@@ -66,7 +66,7 @@
                 </template>
               </el-input>
             </el-form-item>
-            <el-button class="login-btn" type="primary" @click="login('code')">登录</el-button>
+            <el-button class="login-btn"  type="primary" @click="login('code')">登录</el-button>
           </div>
         </el-form>
       </div>
@@ -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) {

src/views/patients-manage/patients-manage.vue

@@ -16,7 +16,7 @@
         </div>
         <div class="button-part" style="justify-content: space-between;">
             <div>
-                <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
+<!--                <el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>-->
                 <el-button icon="FirstAidKit" @click="importData">导入</el-button>
                 <el-button icon="Delete" @click="removeData()">删除</el-button>
             </div>

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/, ''),