1. 权限验证Headers在哪里写的问题
一开始直接创建实例的时候就写上去了,像这样
// 创建实例
const AXIOS_INSTANCE_CHECK = Axios.create({
timeout: 100000,
baseURL: BASE_URL_CHECK,
headers: {
uid: cookie.getCookie('hs_uid'),
userToken: cookie.getCookie('hs_userToken')
}
});
// 请求拦截器
AXIOS_INSTANCE_CHECK.interceptors.request.use(
(config) => {
// 在发送之前做些什么
loadingInstance = Loading.service({
lock: true,
text: '数据加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)'
});
return config;
},
(error) => {
/*对请求错误做些什么*/
loadingInstance && loadingInstance.close();
return Promise.reject(error);
}
);
结果每次请求的时候,就说没有权限,然后第二个接口好了,第三次就又没有权限了
但是在network中查看接口,header信息是有的
后来就改成了这个样子,然后就好了
const AXIOS_INSTANCE_CHECK = Axios.create({
timeout: 100000,
baseURL: BASE_URL_CHECK
});
// 请求拦截器
AXIOS_INSTANCE_CHECK.interceptors.request.use(
(config) => {
// 在发送之前做些什么
config.headers.uid = cookie.getCookie('hs_uid');
config.headers.userToken = cookie.getCookie('hs_userToken');
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
分析:
这个问题是初始化实例的时候,还没有登录信息,但是已经有了实例,之后请求接口的时候,虽然cookie中已经有了登录信息,但是实例中还是之前的实例,并没有登录信息,所以要在没次执行方法的时候,去添加登录信息。
2. element-ui表单验证正则表达式位置的间接性失效问题
<el-form-item label="" prop="ruleName">
<span slot="label">
规则名称
<el-tooltip class="item" effect="dark" content="不可重复" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
<el-input v-model="form.ruleName" autocomplete="off" placeholder="请输入规则名称"></el-input>
</el-form-item>
ruleName: [
{ required: true, validator: validateRuleName, trigger: 'blur' }
],
const regName = /^[a-zA-Z\u4e00-\u9fa5]+$/g;
let validateRuleName = (rule, value, callback) => {
if (!this.form.ruleName) {
callback(new Error('请填写规则名称'));
} else if (!(regName.test(this.form.ruleName))) {
callback('只能输入汉字和字母');
} else {
callback();
}
};
如果正则表达式放在外面,连续触发两次,监测出来的一次true一次false,然后如果不用变量,直接用正则去验证就没有什么问题,所以把变量放在方法内部,然后就好了
<el-form-item label="" prop="ruleName">
<span slot="label">
规则名称
<el-tooltip class="item" effect="dark" content="不可重复" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</span>
<el-input v-model="form.ruleName" autocomplete="off" placeholder="请输入规则名称"></el-input>
</el-form-item>
ruleName: [
{ required: true, validator: validateRuleName, trigger: 'blur' }
],
let validateRuleName = (rule, value, callback) => {
const regName = /^[a-zA-Z\u4e00-\u9fa5]+$/g;
if (!this.form.ruleName) {
callback(new Error('请填写规则名称'));
} else if (!(regName.test(this.form.ruleName))) {
callback('只能输入汉字和字母');
} else {
callback();
}
};