vue 登录拦截及权限管理，登录页面_vue不能登录后端

response => {
	const res = response.data;
	if (res.code !== 200 && res.status !== 200) {
		return Promise.reject(res)
	} else {
		return res
	}
},
//请求失败
error => {
	const {
		response
	} = error;
	if (response) {
		// 请求已发出，但是不在30分钟的范围
		errorHandle(response.status, response.data.message);
		return Promise.reject(response);
	} else {
		// 处理断网的情况
		// eg:请求超时或断网时，更新state的network状态
		// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
		// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
		// store.commit('changeNetwork', false);
	}
}

)
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
// 401: 未登录状态，跳转登录页
case 401:
toLogin();
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
localStorage.removeItem(‘token’);
MessageBox({
message: ‘登录过期，请重新登录’,
callback: action => {
toLogin();
}
})
break;
// 404请求不存在
case 404:
tip(‘请求的资源不存在’);
break;
}
}
export default service

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210528161123266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ==,size_16,color_FFFFFF,t_70)

//登录页

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
  <h4 style="margin-top:0;margin-bottom:20px;text-align:center" class="color-primary">合墨商户后台管理系统</h4>
  <el-form-item prop="username">
    <span class="svg-container">
      <svg-icon icon-class="user" />
    </span>
    <el-input
      ref="username"
      v-model="loginForm.phone"
      placeholder="请输入登录账号"
      name="username"
      type="text"
      tabindex="1"
      autocomplete="on"
    />
  </el-form-item>
  <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
    <el-form-item prop="password">
      <span class="svg-container">
        <svg-icon icon-class="password" />
      </span>
      <el-input
        :key="passwordType"
        ref="password"
        v-model="loginForm.pwd"
        :type="passwordType"
        placeholder="请输入密码"
        name="password"
        tabindex="2"
        autocomplete="on"
        @keyup.native="checkCapslock"
        @blur="capsTooltip = false"
        @keyup.enter.native="handleLogin"
      />
      <span class="show-pwd" @click="showPwd">
        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
  </el-tooltip>
  <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登 录</el-button>
  <p class="text-center"><el-button type="text"  @click="$router.push('/resetPwd')">忘记密码？点此重设密码</el-button></p>
</el-form>