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

一时失言乱红尘 2021-10-18 23:54 266阅读 0赞

如何用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请求方法。