vue3+axios登录系统

首先，你需要在后端实现一个登录接口，接口返回用户信息和 Token。

然后，你可以在 Vue3 项目中使用 Axios 发送登录请求，并将返回的 Token 存储到本地存储中，以便后续的请求可以使用该 Token 进行认证。

以下是一个简单的登录示例：

1. 在 Vue3 项目中安装 Axios：`npm install axios`

2. 创建登录页面，并添加表单元素和提交按钮

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <label>用户名：</label>
      <input v-model="username" type="text" />
      <br />
      <label>密码：</label>
      <input v-model="password" type="password" />
      <br />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

3. 在 Vue3 中，可以使用 `reactive` 函数创建响应式数据。在组件中创建一个对象，包含用户名和密码：

import { reactive } from 'vue';

export default {
  setup() {
    const formData = reactive({
      username: '',
      password: '',
    });

    return {
      formData,
    };
  },
};

4. 在组件中添加 `login` 方法：

import { reactive } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const formData = reactive({
      username: '',
      password: '',
    });

    const login = async () => {
      try {
        const response = await axios.post('/api/login', formData);
        localStorage.setItem('token', response.data.token);
        // 登录成功，跳转到首页
        router.push('/home');
      } catch (error) {
        console.error(error);
      }
    };

    return {
      formData,
      login,
    };
  },
};

5. 在路由守卫中判断用户是否已登录。如果没有登录，则跳转到登录页。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        // 添加路由元信息，用于判断该路由是否需要登录才能访问
        requiresAuth: true,
      },
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },
  ],
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
  const isAuthenticated = localStorage.getItem('token');

  if (requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default router;

这样，你就可以实现一个简单的登录系统了。当用户访问需要登录才能访问的页面时，会先跳转到登录页面进行登录，登录成功后再跳转回目标页面。