4细节补充-优快云博客

本文介绍了如何在Vue项目中设置AJAX拦截器以检查用户登录状态，并处理401错误。同时，讨论了处理后端提示信息的问题，修复了导航动态绑定路由的bug，以及详细步骤完善了密码修改功能，包括输入验证和HTTP POST请求处理。

ajax拦截器设置


//判断有没有登录

//拦截器
Vue.http.interceptors.push((request, next) => {
	//设置token请求头
	if(localStorage.token) {
		//设置token请求头
		Vue.http.headers.common['Authorization'] = localStorage.token
	} else {
		location.href = './login.html'
	}
	next((response)=>{
		if(response.status == 401){
			location.href = './login.html'
		}
		return response
	})
})

attention

出现错误接收来自后端的提示数据信息

后端成功 err.data.msg
错误 message

修改2

添加导航动态绑定路由

<!--导航-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" v-if="$store.state.menu.menu && $store.state.user.info" router>

bug

修改用户页面到首页，
页数标号没有跳转
mgr.vue

对当前page做个记录，不会跳转不对应了

//页码发生改变时触发
        pagetype(page) {
            this.page = page
            this.getuserlist(page)
        },

完善修改密码

setpass() {
				//修改密码
				if(this.pass.oldPassword == '') {
					this.$message.error('请输入旧密码');
				} else if(this.pass.password == '') {
					this.$message.error('请输入新密码');
				} else if(this.pass.rePassword == '') {
					this.$message.error('请再次输入新密码');
				} else if(this.pass.password != this.pass.rePassword) {
					this.$message.error('两次新密码不一致');
				} else {
					this.$http.post(http + updatePwd, this.pass, {
						emulateJSON: true
					}).then((data) => {
						if(data.data.msg == '成功') {
							this.$message({
								message: '恭喜你，修改成功了',
								type: 'success'
							});
							this.dialogFormVisible = false
						} else {
							this.$message.error(data.data.msg);
						}
						console.log(data)
					}, (err) => {
						this.$message.error(err.data.message);
					})
				}
			}