vue-cli 3.0中使用拦截器

首先 我们要创建cli3.0以上的项目 要查看一下node 版本 和 vue版本

然后 vue add @vue/cli 创建一个cli3.0的项目, 好了废话不多说了,直接开始吧

然后再项目的root位置创建一个vue.config.js 这个文件会在打包时跟webpack去合并

在里面我们来写一下 mock 后台的数据请求API

// 安装方法 npm i body-parser --save

//安装 body-parser 可以让我们 可以拿到post请求里面的body数据
let bodyParser = require("body-parser");

module.exports = {
    css: {
        loaderOptions: {
            stylus: {
                "resolve url": true,
                "import": ["./src/theme"]
            }
        }
    },
    pluginOptions: {
        "cube-ui": {
            postCompile: true,
            theme: true
        }
    },
    configureWebpack: {
        devServer: {
            before(app) {
                // 用来解析post的请求格式
                app.use(bodyParser.urlencoded({ extended: false }));
                app.use(bodyParser.json());
                
                // 中间件 来判断一下路由的请求
                app.use(function(req, res, next) {
                    if (/^\/api/.test(req.path)) {
                        if (req.path === "/api/login" || req.headers.token) {
                            next();
                        } else {
                            /* 抛出状态 用户需要登录 */
                            res.sendStatus(401);
                        }
                    } else {
                        next();
                    }
                });
                
                // 用来测试状态的接口
                app.get("/api/test", function(req, res) {
                    res.json({
                        code: "00000000",
                        list: []
                    });
                });
				
				// 登录接口
                app.post("/api/login", function(req, res) {
                    const { username, password } = req.body;
                    if (username === "littleBee" && password === "123456") {
                        res.json({
                            code: "00000000",
                            token: "DESCRIPTIONTOKEN",
                            messages: "success"
                        });
                    } else {
                        res.json({
                            code: "20150001",
                            messages: "用户名或密码错误"
                        });
                    }
                });

				// 如果沒有安裝body-parser 那我們拿到post的请求参数 需要下面这个样子
				app.post("/api/login", function(req, res) {
					// 定义一个空数组 用来装请求的东西 
					let body = [];
					req.on("data", chunk => {
					// chunk 是Buffer对象 将传过来的二进制进行保存
						body.push(chunk);
					}).on("end", ()=> {
						//数据接受完毕 将body 转化成完成的Buffer
						body = Buffer.concat(body).toString();
					})
					// 然后将传递过来的参数 转化成JSON格式 方便调用 
                    const { username, password } = JSON.parse(body);
                    // 这样子 我们就可以获取到post 请求的参数了
                    if (username === "littleBee" && password === "123456") {
                        res.json({
                            code: "00000000",
                            token: "DESCRIPTIONTOKEN",
                            messages: "success"
                        });
                    } else {
                        res.json({
                            code: "20150001",
                            messages: "用户名或密码错误"
                        });
                    }
                });
				
				// 退出登录的接口
                app.post("/api/loginout", function(req, res) {
                    res.json({
                        code: "-1",
                        messages: "退出成功"
                    });
                });
            }
        }
    }
};

好了,我们的mock api的接口就写好了,接下来 我们来写 拦截器的部分

// interceptors.js

import axios from "axios";
import store from "./store";
import router from "./router";

/* 全局添加拦截器作用是可以在每个api前面就加上headers的token验证 */
axios.interceptors.request.use(config => {
    /* 判断token是否存在和是否需要token验证的路由 */
    if (store.state.token) {
        config.headers.xToken = "token";
    };
    return config;
});

/* 处理退出响应拦截器 */
// 响应 拦截器 的第二个参数, err 可以捕获状态, 来进行响应的处理
axios.interceptors.response.use(response => {
    if (response.status === 200) {
        const res = response.data;
        /* 如果 code 是-1 说明用户注销 或者 或者token已经过期了 */
        /* 需要消除localStoreage 和 清除vuex的token */
        if (res.code === -1) {
            clearHandler();
        }
    }
    return response;
}, 
err=> {
    /*判断一下未授权 */
    if(err.response.status === 401) {
        clearHandler();
    }
});

// 用来清空localStoreage 和 vuex里面的内容
function clearHandler() {
    localStorage.removeItem("token");
    store.commit("setToken", "");
    /* 跳转到登录页面 */
    router.push({
        path: "/login",
        query: {
            redirect: router.currentRoute.path
        }
    });
}

假如现在我们未登录 来请求一下 /api/test 接口
我们可以看到 一个状态码401 用户没权限,这个样子 体验就很好

现在我们来请求一下 登录的接口 /api/login
这样子 我们可以看到我们之前写的mock 数据请求也是没问题的

//安装 axios
npm i axios --save

然后再 main.js 里面 挂载一下 就可以全局的使用了,不用每个地方都引入 axios
import axios from “axios”;
Vue.prototype.$http = axios;

好了, 登录成功之后 我们来看一下 请求/api/test 有没有给我们加上 xToken

好了,全局拦截器,每个api请求都带上了 token,如果有什么问题,欢迎指出,如果这篇文章 对你有用处,点个赞呗,谢谢