【vue】前端登录请求

流程

api统一管理

在api/index.js中编写登录请求

所有的请求都写在这个文件中，以方便api统一管理

//登陆
//url:/api/user/login  method:post  username  password 
export const reqUserLogin = (data)=>requests({url:'/user/login',data,method:'post'}); 

在login.vue中实现简单的登录操作

methods: {
        login() {
            const {username,password} = this;
            (username&&password)&&this.$store.dispatch('userLogin',{username,password});
        }
    },

在user模块中实现登录请求和回调函数获取token

import {reqUserLogin} from '@/api'
const state={
    token:'',
};
const mutations = {
    USERLOGIN(state, token) {
        state.token = token;
    }
};
const actions = {
    //登录业务
    async userLogin({commit}, obj) {
        let {data} = await reqUserLogin(obj);
        console.log(data.msg);
        if (data.code == 200) {
            commit("USERLOGIN", data.msg);
            return "ok";
        } else {
            return Promise.reject(new Error("failure"));
        }
    },
};
const getters = {};
export default {
    state,
    mutations,
    actions,
    getters
}

在之后的请求中可以带上token去获取用户信息，实现安全原则。