第五天

79 阅读1分钟

配置全局axios拦截

本来想在红框内处理登录失败的信息,但是不可能每次都在收到请求后处理失败信息,所以配置全局axios拦截

并且请求路径中的ip以及端口号可以放在全局axios的前置拦截中了,发起请求会自动在请求路径前面添加上

image.png

axios.js全局axios拦截:

/**
 * 配置axios前置拦截与后置拦截
 * 前置拦截:在向后端发起axios请求的时候会携带域名信息,一般把域名信息放在前置拦截中添加
 * 后置拦截:对后端返回的信息进行处理,比如登录时密码错误,返回的res.data.code=0,并携带有res.data.mes="登陆密码错误"
 */

import axios from 'axios'
import {ElMessage} from 'element-plus'
import router from './router'
import store from './store'
//前置拦截
axios.defaults.baseURL="http://localhost:8081" //这样的话发起axios请求的时候,http://localhost:8081就会作为前缀添加到请求路径里

axios.interceptors.request.use(config => {
    return config
})

//后置拦截
axios.interceptors.response.use(response => {
    let res = response.data;
    // console.log("========");
    // console.log(res);
    // console.log("========");
    if (res.code == 200 || res.code == 1){
        ElMessage.success("登录成功");
        return response;
    }else{
        ElMessage.error('登陆失败');
        return Promise.reject(response.data.msg);//就不会直接终止了这次响应,不会再把响应继续传递
    }
},
    error => {  //对应类似这种(后端捕获到异常): @ResponseStatus(HttpStatus.BAD_REQUEST)
        console.log(error);
        if(error.response.data){
            error.message = error.response.data.msg;
        }
        if(error.response.status == 401){//未认证
            store.commit("REMOVE_INFO");
            router.push("/login")
        }
        ElMessage.error(error.message);
        return Promise.reject(error);
    }
)

公共组件Header

image.png

image.png

博客列表首页开发

博客发表与编辑开发

博客详情页面开发

编辑按钮的权限

路由权限拦截