vue项目ca验证登录

在 Vue 项目中实现登录验证需要以下步骤：

1. 创建一个登录页面，包括用户名和密码输入框以及登录按钮。

2. 在 Vue 组件中使用 `v-model` 指令绑定输入框中的值。

3. 在登录按钮上绑定一个点击事件，并在事件处理函数中获取输入框中的值。

4. 将获取到的用户名和密码发送给后端进行验证。

5. 在后端验证通过后，返回一个 token 给前端，前端将该 token 存储在本地以便后续请求时使用。

6. 在后续请求中，将 token 添加到请求头中进行身份验证。

下面是一个简单的登录验证示例：

<template>
  <div>
    <input v-model="username" placeholder="用户名"/>
    <input v-model="password" placeholder="密码" type="password"/>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      // 发送登录请求
      const res = await this.$http.post('/login', {
        username: this.username,
        password: this.password,
      });

      // 将 token 存储在本地
      localStorage.setItem('token', res.data.token);

      // 跳转到首页
      this.$router.push('/');
    },
  },
};
</script>

在后续请求中，可以使用 axios 拦截器来自动添加 token：

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://api.example.com',
});

// 添加请求拦截器
http.interceptors.request.use((config) => {
  // 从本地存储中获取 token
  const token = localStorage.getItem('token');

  // 如果 token 存在，则在请求头中添加 Authorization 字段
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

export default http;