vueで認証コード+ログインを書く方法

2254 ワード

vueで認証コード+ログインを書く方法
このプロジェクトはログイン前に認証コードを追加する必要があり、リクエストインタフェースの区別をより容易にするために、2つのリクエストインタフェースをカプセル化することができ、1つのログイン前にリクエストするインタフェース、1つはログイン後にリクエストするインタフェースであり、互いに干渉しないようにすることができる.1.ログイン前にindexのフォルダaxiosを設定.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
    }
}


メールで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リクエストメソッドをカプセル化します.