vue3接口参数登录

解决方案

在Vue 3项目中实现接口参数登录，主要是通过向后端发送带有用户名和密码等登录信息的请求，接收返回的token等认证信息并存储起来以维持用户登录状态。这需要利用Vue 3中的组合式API以及axios等HTTP库来完成网络请求。

思路一：使用组合式API与axios

在项目中安装axios（如果还未安装）npm install axios。

然后创建一个名为login.js的文件用于处理登录逻辑：

javascript
import { ref } from 'vue';
import axios from 'axios';</p>

<p>export function useLogin() {
    const loginInfo = ref({
        username: '',
        password: ''
    });
    const errorMessage = ref('');
    const loading = ref(false);</p>

<pre><code>const login = async () => {
    loading.value = true;
    try {
        const response = await axios.post('/api/login', loginInfo.value);
        // 假设后端返回的数据结构为{success: Boolean, data: {token: String}}
        if (response.data.success) {
            // 存储token，这里可以存储到localStorage或者vuex中
            localStorage.setItem('token', response.data.data.token);
            // 登录成功后的操作，比如跳转页面
        } else {
            errorMessage.value = '登录失败，请检查用户名或密码';
        }
    } catch (error) {
        errorMessage.value = '网络错误，请稍后再试';
    } finally {
        loading.value = false;
    }
};

return {
    loginInfo,
    errorMessage,
    loading,
    login
};

}

在组件中使用：

vue

    <div>
        
        
        <button>{{ loading ? '登录中...' : '登录' }}</button>
        <p>{{ errorMessage }}</p>
    </div>
</p>


import { useLogin } from './login';

export default {
    setup() {
        const { loginInfo, errorMessage, loading, login } = useLogin();

        return {
            loginInfo,
            errorMessage,
            loading,
            login
        };
    }
};


<p>

思路二：使用Vuex管理登录状态

这种方式适合大型项目，将登录相关的状态（如token、用户信息等）集中管理。

先配置Vuex store：

javascript
// store/index.js
import { createStore } from 'vuex';</p>

<p>export default createStore({
    state: {
        token: localStorage.getItem('token') || ''
    },
    mutations: {
        setToken(state, token) {
            state.token = token;
            localStorage.setItem('token', token);
        }
    },
    actions: {
        async login({ commit }, loginInfo) {
            try {
                const response = await axios.post('/api/login', loginInfo);
                if (response.data.success) {
                    commit('setToken', response.data.data.token);
                    // 其他登录成功后的操作
                } else {
                    throw new Error('登录失败');
                }
            } catch (error) {
                throw error;
            }
        }
    }
});

组件中调用：

vue</p>


import { useStore } from 'vuex';

export default {
    setup() {
        const store = useStore();
        const login = async () => {
            try {
                await store.dispatch('login', loginInfo.value);
                // 跳转或其他操作
            } catch (error) {
                // 处理错误
            }
        };

        return {
            login
        };
    }
};


<p>

这两种思路都可以很好地实现Vue 3中的接口参数登录功能，根据项目的规模和个人喜好选择合适的方式即可。