Kaynağa Gözat

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

master
Eddie 3 yıl önce
ebeveyn
işleme
225c1ce1ef
4 değiştirilmiş dosya ile 154 ekleme ve 140 silme
  1. +141
    -126
      src/components/AdminInfoDialog/index.vue
  2. +8
    -1
      src/layout/components/Navbar.vue
  3. +3
    -5
      src/permission.js
  4. +2
    -8
      src/utils/request.js

+ 141
- 126
src/components/AdminInfoDialog/index.vue Dosyayı Görüntüle

@@ -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>

+ 8
- 1
src/layout/components/Navbar.vue Dosyayı Görüntüle

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


+ 3
- 5
src/permission.js Dosyayı Görüntüle

@@ -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()
}
}


})


+ 2
- 8
src/utils/request.js Dosyayı Görüntüle

@@ -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 => {


Yükleniyor…
İptal
Kaydet