vue发送服务器请求和token验证

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有效验证成功就可以发送和接收请求数据了。