vue发送服务器请求和token验证
之前我们已经提到了token验证,现在我们通过vue搭建的项目中也必不可少的需要向服务器请求数据,类似react,我们还是使用axios来做服务请求的发送。
关于axios的详细操作和文档可以移步GitHub的axios文档,我这里不过多介绍。只说一下具体用法,直接上代码:
import axios from "axios"
export default {
login: ({ username, password } = {}) => {
return axios.post('/users/login', {
username, password
})
.then(response => response.data)
.catch(error => error)
},
regist: ({ username, password } = {}) => {
return axios.post('/users/regist', {
username, password
}
)
.then(response => response.data)
.catch(error => error)
},
setToken: token => window.localStorage.user_token = token,
getToken: () => window.localStorage.user_token,
}
首先我们需要安装axios模块,如果包管理器用的是npm就使用命令npm i axios --save
,如果是yarn包管理器就用命令yarn add axios --save
进行安装,安装好后直接导入导入核心模块axios,然后发送求情即可。
jwt验证,服务器端得验证我们之前已经讲过,不再赘述,但是我们现在的问题就是如何在发送请求前携带我们的token,不携带服务器是无法验证的。我们如果用jQuery开发,就会用到$.ajaxSettings.beforeSend
这个方法在请求前携带token,但是我们用vue框架开发也有其他方法去完成。我们可以在src目录下配置一个全局配置/src/config/axios.js
import axios from "axios"
import UserService from "../services/userService"
// Add a request interceptor
export default ()=>{
axios.interceptors.request.use(function (config) {
console.log("before request",config);
// Do something before request is sent
const token = UserService.getToken();
console.log(token);
if(token){
config.headers["Authorization"] = `Bearer ${token}`;
console.log("AFTR:",config);
}
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
}
用这样的方法去携带token到服务器去验证,token有效验证成功就可以发送和接收请求数据了。