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: "用户名或密码错误"
});
}
});

// 退出登录的接口
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,如果有什么问题,欢迎指出,大家一起进步,谢谢