解决异步toen 获取失败后接口请求错误的问题

src/components/AdminInfoDialog/index.vue

@@ -6,15 +6,17 @@
       '--dialog-width': '807px',
       '--dialog-height': '543px',
       '--title-height': '51px',
-      '--footer-height': '62px'
+      '--footer-height': '62px',
     }"
     @close-dialog="handleClose"
   >
-    <div v-loading="uploadLoading"
-         class="slot-box flex-column"
-         element-loading-text="图片上传中..."
-         element-loading-spinner="el-icon-loading"
-         element-loading-background="rgba(0, 0, 0, 0.8)">
+    <div
+      v-loading="uploadLoading"
+      class="slot-box flex-column"
+      element-loading-text="图片上传中..."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
       <div class="cover-wrap">
         <div class="avatar-big-box">
           <img v-if="adminInfo.headerImg" :src="adminInfo.headerImg" alt="" />
@@ -35,12 +37,15 @@
         {{ adminInfo.phone | maskPhone }}
       </div>
       <div class="form-box flex-column">
-        <el-form ref="passForm" class="flex-column" label-width="82px" :model="passForm" :rules="rules">
+        <el-form
+          ref="passForm"
+          class="flex-column"
+          label-width="82px"
+          :model="passForm"
+          :rules="rules"
+        >
           <el-form-item label="Team ID:">
-            <el-input :value="adminInfo.id"
-                      size="mini"
-                      class="form-input-2"
-                      disabled />
+            <el-input :value="adminInfo.id" size="mini" class="form-input-2" disabled />
             <FNButton
               v-clipboard:copy="adminInfo.id"
               v-clipboard:success="clipboardSuccess"
@@ -55,19 +60,28 @@
             </FNButton>
           </el-form-item>
           <el-form-item label="新密码:" prop="pass">
-            <el-input v-model="passForm.pass"
-                      type="password"
-                      size="mini"
-                      class="form-input-1" />
+            <el-input
+              v-model="passForm.pass"
+              type="password"
+              size="mini"
+              class="form-input-1"
+            />
           </el-form-item>
           <el-form-item label="确认密码:" prop="checkPass">
-            <el-input v-model="passForm.checkPass"
-                      type="password"
-                      size="mini"
-                      class="form-input-1" />
+            <el-input
+              v-model="passForm.checkPass"
+              type="password"
+              size="mini"
+              class="form-input-1"
+            />
           </el-form-item>
           <el-form-item v-if="needCaptcha" label="验证码">
-            <el-input v-model="passForm.captcha" size="mini" class="form-input-3" placeholder="请输入验证码" />
+            <el-input
+              v-model="passForm.captcha"
+              size="mini"
+              class="form-input-3"
+              placeholder="请输入验证码"
+            />
             <CountDownBtn class="captcha-btn" @on-click="sendSms" />
           </el-form-item>
         </el-form>
@@ -81,164 +95,166 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index'
-import { createNamespacedHelpers } from 'vuex'
-import CountDownBtn from '@/components/Common/CountDownBtn'
-import FNButton from '@/components/FNButton/index'
-import clipboard from '@/directive/clipboard'
-import { updateAdminPwd } from '@/api/admin'
-import { sendSms } from '@/api/admin'
-import { maskPhone } from '@/filters'
-import CommonSet from '@/api/setting-center/CommonSet'
+import Dialog from "@/components/Dialog/index";
+import { createNamespacedHelpers } from "vuex";
+import CountDownBtn from "@/components/Common/CountDownBtn";
+import FNButton from "@/components/FNButton/index";
+import clipboard from "@/directive/clipboard";
+import { updateAdminPwd } from "@/api/admin";
+import { sendSms } from "@/api/admin";
+import { maskPhone } from "@/filters";
+import CommonSet from "@/api/setting-center/CommonSet";
 
-const { mapGetters, mapActions } = createNamespacedHelpers('admin-info')
+const { mapGetters, mapActions } = createNamespacedHelpers("admin-info");
 export default {
-  name: 'AdminInfoDialog',
+  name: "AdminInfoDialog",
   components: {
     Dialog,
     CountDownBtn,
-    FNButton
+    FNButton,
   },
   filters: {
-    maskPhone
+    maskPhone,
   },
   directives: {
-    clipboard
+    clipboard,
   },
   props: {},
   data() {
     const validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请输入密码'))
+      if (value === "") {
+        callback(new Error("请输入密码"));
       } else {
-        if (this.passForm.checkPass !== '') {
-          this.$refs.passForm.validateField('checkPass')
+        if (this.passForm.checkPass !== "") {
+          this.$refs.passForm.validateField("checkPass");
         }
-        callback()
+        callback();
       }
-    }
+    };
     const validatePass2 = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'))
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
       } else if (value !== this.passForm.pass) {
-        callback(new Error('两次输入密码不一致!'))
+        callback(new Error("两次输入密码不一致!"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       uploadLoading: false,
-      defaultAvatar: './pic/default/default_avatar.png',
+      defaultAvatar: "./pic/default/default_avatar.png",
       needCaptcha: false,
       passForm: {
-        pass: '',
-        checkPass: '',
-        captcha: ''
+        pass: "",
+        checkPass: "",
+        captcha: "",
       },
       rules: {
-        pass: [
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        checkPass: [
-          { validator: validatePass2, trigger: 'blur' }
-        ],
-        captcha: [
-          { required: true, message: '短信验证码不能为空', trigger: 'blur' }
-        ]
-      }
-    }
+        pass: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+        captcha: [{ required: true, message: "短信验证码不能为空", trigger: "blur" }],
+      },
+    };
   },
   computed: {
-    ...mapGetters(['isAdminEditDlgExist', 'adminInfo'])
+    ...mapGetters(["isAdminEditDlgExist", "adminInfo"]),
   },
   created() {
-    this.initDialogForm()
+    this.initDialogForm();
   },
   methods: {
-    ...mapActions({ initAdminInfo: 'initAdminInfo', changeAvatar: 'updateAvatar' }),
+    ...mapActions({ initAdminInfo: "initAdminInfo", changeAvatar: "updateAvatar" }),
     initDialogForm() {
-      this.initAdminInfo()
+      this.initAdminInfo();
     },
     handleClose() {
-      this.$store.commit('admin-info/TOGGLE_EDIT_DLG', false)
+      this.$store.commit("admin-info/TOGGLE_EDIT_DLG", false);
     },
     sendSms() {
-      sendSms().then(() => {
-        this.$message.success('发送成功')
-      }).catch((res) => {
-        this.$message.error(res.data.msg)
-        this.$refs['count-down-btn'].textContent = '重新发送'
-        // this.$refs['count-down-btn'].classList.remove('gray-btn').add('blue-btn')
-      })
+      sendSms()
+        .then(() => {
+          this.$message.success("发送成功");
+        })
+        .catch((res) => {
+          this.$message.error(res.data.msg);
+          this.$refs["count-down-btn"].textContent = "重新发送";
+          // this.$refs['count-down-btn'].classList.remove('gray-btn').add('blue-btn')
+        });
     },
     savePassword() {
-      this.$refs['passForm'].validate((valid) => {
+      this.$refs["passForm"].validate((valid) => {
         if (valid) {
-          const data = { pwd: this.passForm.pass }
+          const data = { pwd: this.passForm.pass };
           if (this.passForm.captcha) {
-            data.code = this.passForm.captcha
+            data.code = this.passForm.captcha;
           }
-          updateAdminPwd(data).then((res) => {
-            if (res.code === 401) {
-              this.needCaptcha = true
-              this.$message.error('本次操作需要短信验证码')
-              return false
-            } else {
-              this.needCaptcha = false
-              this.passForm.captcha = ''
-              this.$store.commit('admin-info/TOGGLE_EDIT_DLG', false)
-              this.$message.success('操作成功')
+          updateAdminPwd(data)
+            .then((res) => {
+              if (res.code === 401) {
+                this.needCaptcha = true;
+                this.$message.error("本次操作需要短信验证码");
+                return false;
+              } else {
+                this.needCaptcha = false;
+                this.passForm.captcha = "";
+                this.$store.commit("admin-info/TOGGLE_EDIT_DLG", false);
+                this.$message.success("操作成功");
 
-              // 退出登录
-              this.$store.dispatch('user/logout').then((res) => {
-                this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-              })
-            }
-          }).catch(() => {
-            this.$message.error('操作失败')
-          })
+                // 退出登录
+                this.$store.dispatch("user/logout").then((res) => {
+                  this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+                });
+              }
+            })
+            .catch(() => {
+              this.$message.error("操作失败");
+            });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     resetForm() {
-      this.$refs.passForm.resetFields()
+      this.$refs.passForm.resetFields();
     },
     clipboardSuccess() {
-      this.$message.success('复制成功')
+      this.$message.success("复制成功");
     },
     clipboardError() {
-      this.$message.error('复制失败')
+      this.$message.error("复制失败");
     },
     handleImageSelected(file, fileList) {
-      const api = new CommonSet()
-      this.uploadLoading = true
-      api.uploadFile(file, '', '管理员头像').then(response => {
-        const { data } = response
-        const { fileName, saveName } = data
-        const payload = { saveName: saveName, fileName: fileName }
-        this.changeAvatar(payload).then(_ => {
-          this.uploadLoading = false
-          this.$message.success('编辑成功')
-        }).catch(_ => {
-          this.uploadLoading = false
-          this.$message.error('编辑失败')
-        })
-      }).catch(error => {
-        this.uploadLoading = false
-        this.$message({
-          message: error,
-          type: 'error'
+      const api = new CommonSet();
+      this.uploadLoading = true;
+      api
+        .uploadFile(file, "", "管理员头像")
+        .then((response) => {
+          const { data } = response;
+          const { fileName, saveName } = data;
+          const payload = { saveName: saveName, fileName: fileName };
+          this.changeAvatar(payload)
+            .then((_) => {
+              this.uploadLoading = false;
+              this.$message.success("编辑成功");
+            })
+            .catch((_) => {
+              this.uploadLoading = false;
+              this.$message.error("编辑失败");
+            });
         })
-      })
-    }
-  }
-}
+        .catch((error) => {
+          this.uploadLoading = false;
+          this.$message({
+            message: error,
+            type: "error",
+          });
+        });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 .form-box {
   &::v-deep .el-input__inner {
     height: 38px;
@@ -269,10 +285,10 @@ export default {
 }
 
 .copy-btn {
-  color: #FF4949;
+  color: #ff4949;
   width: 61px;
   height: 38px;
-  background: #FFE7E7;
+  background: #ffe7e7;
   border-radius: 5px;
   border: 0;
   margin-left: 5px;
@@ -284,7 +300,7 @@ export default {
   height: 38px;
   font-size: 14px;
   font-weight: 400;
-  color: #FFFFFF;
+  color: #ffffff;
   line-height: 22px;
   padding: 8px 9px;
 }
@@ -328,7 +344,7 @@ export default {
     transition: all ease-in-out 0.2s;
 
     span {
-      color: #FFF;
+      color: #fff;
       font-size: 14px;
     }
 
@@ -337,6 +353,5 @@ export default {
       opacity: 1;
     }
   }
-
 }
 </style>

src/layout/components/Navbar.vue

@@ -63,6 +63,7 @@ import { maskPhone } from '@/filters'
 // import SizeSelect from '@/components/SizeSelect'
 // import LangSelect from '@/components/LangSelect'
 // import Search from '@/components/HeaderSearch'
+import {  removeToken } from '@/utils/auth'
 
 export default {
   components: {
@@ -89,8 +90,14 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
+
+ 
+      // await this.$store.dispatch('user/logout')
+               removeToken()
+
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+         
+
     },
     showAdminEditDialog() {
       this.$store.dispatch('admin-info/initAdminInfo', true)

src/permission.js

@@ -20,9 +20,7 @@ router.beforeEach(async (to, from, next) => {
   // determine whether the user has logged in
   const hasToken = getToken()
 
-  console.log(hasToken)
-
-  if (  hasToken) {
+  if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
       next({ path: '/' })
@@ -71,8 +69,8 @@ router.beforeEach(async (to, from, next) => {
       NProgress.done()
     }
   }
- 
-    
+
+
 
 
 })

src/utils/request.js

@@ -18,14 +18,8 @@ service.interceptors.request.use(
     // do something before request is sent
     config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  
-    if (store.getters.token) {
-
-      console.log(getToken())
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
-      config.headers['api-token'] = getToken()
-    }
+    config.headers['api-token'] = getToken() || ''
+  
     return config
   },
   error => {