图片上传错误拦截，添加返回按钮，401拦截，登录逻辑修复

杨泽宇
1 parent 16c7dc0d
Showing 8 changed files with 48 additions and 32 deletions
src/api/request.ts
src/components/Uploader/index.vue
src/utils/progress.ts
src/views/permission/edit.vue
src/views/role/edit.vue
src/views/role/permission.vue
src/views/role/user.vue
src/views/user/role.vue
@@ -8,7 +8,6 @@ let url: any = import.meta.env
 let instance = axios.create({
   baseURL: url.VITE_BASE_URL,
   withCredentials: true,
-  // timeout: 10
   timeout: 10000
 })
  
@@ -59,11 +58,9 @@ instance.interceptors.response.use(
       return false
     } else {
       msg = error?.message ?? 'Error'
+      ElMessage.error(msg);
       return Promise.reject(error)
     }
-    // console.log(msg)
-    // ElMessage.error(msg);
-    // return Promise.reject(error)
   }
 )
  
@@ -88,6 +88,14 @@ const beforeAvatarUpload = (file: ElFile) =&gt; {
   }
   return isFormatAllowed && isSizeAllowed;
 };
+/**
+ * 上传文件失败回调
+ * @param { ElUploadProgressEvent } 回调返回对象
+ */
+const handlError = (err: ElUploadProgressEvent) => {
+  console.log(err);
+  ElMessage.error("上传失败，请重试");
+};
 const emit = defineEmits<{
   (e: "imageChange", url: string, tagName: string): void;
 }>();
@@ -103,6 +111,7 @@ const emit = defineEmits&lt;{
       :headers="uploadSettings.headers"
       name="multipartFile"
       :on-success="handleAvatarSuccess"
+      :on-error="handlError"
       :before-upload="beforeAvatarUpload"
     >
       <img
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import router from '@/router/index'
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import router from '@/router/index';
+import * as store from "@/pinia/index";
  
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
  
 router.beforeEach((to: any, from: any, next: any) => {
-  // if (to.matched.length == 0) { router.push(to.path); }
-  NProgress.start()
-  const hasToken = true
-  const whiteList = ['/login']
+  NProgress.start();
+  const hasToken = store.family.loginStore().token;
+  const whiteList = ['/login'];
  
-  // TIP 页面标题设置
-  globalThis.document.title = to.meta.title? to.meta.title: import.meta.env.VITE_APP_TITLE
+  // 页面标题设置
+  globalThis.document.title = to.meta.title? to.meta.title: import.meta.env.VITE_APP_TITLE;
  
   if (hasToken) {
-    console.log('has')
     if (to.path === '/login') {
-      // next({ path: '/about' })
-      next()
+      next({ path: '/dashboard' })
       NProgress.done()
     } else {     
       next()
       NProgress.done()
     }
   } else {
-    console.log('hasnot')
     if (whiteList.indexOf(to.path) !== -1) {
       next()
     } else {
@@ -2,6 +2,7 @@
 import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { permissionSave } from "@/api/user/permission";
 import { useRoute } from "vue-router";
+import { back } from "@/utils/tool";
 import type { ElForm } from "element-plus";
 let instance: ComponentInternalInstance | null = getCurrentInstance();
 let tempPriority = ref(0);
@@ -175,6 +176,7 @@ onMounted(() =&gt; {
           <el-button type="primary" @click="submitForm(ruleFormRef)"
             >提交</el-button
           >
+          <el-button type="info" @click="back">返回</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -2,6 +2,7 @@
 import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { roleSave } from "@/api/user/role";
 import { useRoute } from "vue-router";
+import { back } from "@/utils/tool";
 import type { ElForm } from "element-plus";
 const {
   appContext: {
@@ -105,6 +106,9 @@ onMounted(() =&gt; {
             v-show="form.dataType === 'add'"
             >取消</el-button
           >
+          <el-button type="info" @click="back"
+            >返回</el-button
+          >
         </el-form-item>
       </el-form>
     </el-card>
@@ -2,9 +2,10 @@
 import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { rolePermissionSave, rolePermission } from "@/api/user/role";
 import { useRoute } from "vue-router";
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import { back } from "@/utils/tool";
+import type Node from "element-plus/es/components/tree/src/model/node";
 import type { ElForm } from "element-plus";
-import type { ElTree } from 'element-plus'
+import type { ElTree } from "element-plus";
 const {
   appContext: {
     config: { globalProperties },
@@ -17,17 +18,17 @@ let form = reactive({
   },
   permissions: [],
   defaultPermissions: [],
-  collections: []
+  collections: [],
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
-const addTreeTest = ref<InstanceType<typeof ElTree>>()
+const addTreeTest = ref<InstanceType<typeof ElTree>>();
 /**
  * 表单重置
  */
 const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
   if (!formEl) return;
-  form.defaultPermissions = []
-  addTreeTest.value!.setCheckedNodes([])
+  form.defaultPermissions = [];
+  addTreeTest.value!.setCheckedNodes([]);
   formEl.resetFields();
 };
 /**
@@ -61,14 +62,14 @@ const getPermissions = async (roleId = useRoute().query.roleId) =&gt; {
   try {
     let res = await rolePermission({ roleId: roleId });
     form.permissions = res?.data?.data;
-    form.defaultPermissions = getCheckedPermissions(res?.data?.data)
+    form.defaultPermissions = getCheckedPermissions(res?.data?.data);
   } catch (e) {
     console.log(e);
   }
 };
 interface Tree {
-  label: string
-  children?: Tree[]
+  label: string;
+  children?: Tree[];
 }
 /**
  * 树组件自定义属性
@@ -80,7 +81,7 @@ const defaultProps: Tree = {
 /**
  * 选中树节点回显
  * @param {array} menuArray 树数组
- * @returns {array} 
+ * @returns {array}
  */
 const getCheckedPermissions = (menuArray: Tree[]) => {
   if (menuArray) {
@@ -151,11 +152,10 @@ onMounted(() =&gt; {
           <el-button type="primary" @click="submitForm(ruleFormRef)"
             >提交</el-button
           >
-          <el-button
-            type="info"
-            @click="resetForm(ruleFormRef)"
+          <el-button type="info" @click="resetForm(ruleFormRef)"
             >置空</el-button
           >
+          <el-button type="info" @click="back">返回</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -2,6 +2,7 @@
 import { reactive, onMounted } from "vue";
 import { useRoute } from 'vue-router';
 import { roleUser } from "@/api/user/role";
+import { back } from '@/utils/tool';
 import Pagination from "@/components/Pagination/index.vue";
 interface Form {
   page: number;
@@ -70,6 +71,9 @@ onMounted(() =&gt; {
 <template>
   <div class="page-container">
     <h1>角色用户</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-button type="info" @click="back">返回</el-button>
+    </el-row>
     <el-table
       :data="data.list"
       style="width: 100%"
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
 import { userRoles } from "@/api/user/user";
-import { parseTime } from "@/utils/tool";
+import { parseTime, back } from "@/utils/tool";
 import { useRoute } from "vue-router";
 interface Form {
   page: number;
@@ -49,6 +49,9 @@ onMounted(() =&gt; {
 <template>
   <div class="page-container">
     <h1>用户角色</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-button type="info" @click="back">返回</el-button>
+    </el-row>
     <el-table
       :data="data.list"
       style="width: 100%"