如何用vue来写验证码+登录

如何用vue来写验证码+登录

该项目需要在登录之前添加验证码，为了更加方便请求接口的区分，可以封装两个请求接口，一个登录之前需要请求的接口，一个为登录之后请求的接口，使之互不干扰。
1.登录前设置一个文件夹axios,其中的index.js写请求的接口，config写配置

index.js

/*接口文件*/
//axios配置文件
import index from './config'

export default {
    API_VERIFY: (params) => index('get', '/login/getverify?', params),//验证码

    API_LOGIN: (body ) => index('post','login/index?' ,body),//登录
   
}

cofig.js
import axios from 'axios'
import index from './index'

const instance = axios.create({
    //默认地址
    baseURL: 'http://192.0.0.0',
    //响应时长
    timeout: 6000
})

//请求拦截器
instance.interceptors.request.use(
    /**
     * @param config    传入的url以及参数
     */
    (config) => {
        axios.defaults.headers['Content-Type'] = 'Access-Control-Allow-Origin'
        // console.log("发送请求",config)
        return config
    },
    (error) => {
        console.log("发送请求失败")
        return Promise.reject(error)
    }
)

//响应拦截器
instance.interceptors.response.use(
    (response) => {
        // console.log("响应成功",response)
        return response.data
    },
    (error) => {
        console.log("响应失败",error.response)
        return Promise.reject(error)
    }
)
/**
 * @param {请求方式} method 
 * @param {请求地址} path 
 * @param {请求参数} params
 */
export default function (method, url, params) {
    method = method.toLowerCase()
    switch (method) {
        case 'get':
            params = params || ''
            return instance.get(url + params)
        case 'post':
            params = params || null
            return instance.post(url,params)
        default:
        console.error('未知的method:'+method)
        return false
    }
}

在main.js

import index from './axios/index'；
Vue.prototype.$index = index

在需要的页面调用你在index.js里面设置的请求接口名
列：登录页面login.vue

 this.$index.API_LOGIN(obj).then(res=>{
 console.log(res)})
 .catch(err=>{
 console.log(err)})

其它页面也相应的调用即可，然后用相同方法再封装一个登录后的axios请求方法。