=============
前端_错误拦截
=============

当用户名或密码输入错误时，根据后端返回的错误结果弹窗提示。

配置Axios拦截所有来自后端的响应，统一处理错误。

1 添加Axios拦截器

/src/axios.js：

import axios from 'axios'
import Element from 'element-ui'
import router from './router'
import store from './store'

axios.defaults.baseURL = "http://localhost:8081"

// 前置拦截(拦截请求)
axios.interceptors.request.use(config => {
  return config
})

// 后置拦截(拦截响应)
axios.interceptors.response.use(response => {
  let result = response.data;
  console.log(result)

  if (result.code === 200)
      return response

  Element.Message.error(result.message, {duration: 3 * 1000})
  return Promise.reject(result.message)
}, error => {
  console.log(error)

  if(error.response.data)
    error.message = error.response.data.message

  if(error.response.status === 401) { // Shiro异常
    store.commit("REMOVE_ALL")
    router.push("/login")
  }

  Element.Message.error(error.message, {duration: 3 * 1000})
  return Promise.reject(error.message)
})

2 启用Axios拦截器

/src/main.js：

...
import './axios'
...

3 修改登录页面

/src/views/Login.vue：

...
submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      ...
      this.$axios.post('/login',
        this.ruleForm).then(response => {
          ...
        })
    }
    ...
  });
},
...

运行测试。

rabbit
123456
用户不存在

bear
123456
密码不正确

bear
111111
列表页面