在 Vue.js 中实现简单的登陆认证-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中实现简单的登陆认证

在现代 Web 应用程序中，用户认证是必不可少的功能。Vue.js 是一种流行的前端框架，可以帮助我们实现简单的登陆认证。本文将介绍如何在 Vue.js 中实现这一功能。

前置知识

在阅读本文之前，您需要了解以下内容：

Vue.js 的基本使用方法
JavaScript 的基本语法和概念
前端路由的基本概念

实现步骤

我们将在 Vue.js 中实现一个简单的登陆认证流程：

用户访问应用程序的首页，看到一个登陆表单。
用户输入用户名和密码，点击“登陆”按钮。
应用程序向后端发送登陆请求，验证用户名和密码是否正确。
如果验证通过，应用程序将用户信息存储在本地，并跳转到用户个人主页。
如果验证失败，应用程序显示错误消息并保留登陆表单。

下面将逐步实现这个流程。

1. 创建登陆表单

我们首先需要创建一个登陆表单。在 Vue.js 中，我们可以使用 v-model 指令来绑定表单元素的值到组件的数据属性上。以下是一个简单的登陆表单的代码：

// www.javascriptcn.com code example
<template>
  <form @submit.prevent="login">
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" v-model="password">
    <br>
    <button type="submit">登陆</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // TODO: 实现登陆逻辑
    }
  }
};
</script>

2. 发送登陆请求

在 login 方法中，我们需要向后端发送登陆请求。我们可以使用 axios 库来发送 HTTP 请求。以下是一个简单的 login 方法的代码：

// www.javascriptcn.com code example
methods: {
  async login() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      const { data } = response;
      // TODO: 处理登陆成功的情况
    } catch (error) {
      // TODO: 处理登陆失败的情况
    }
  }
}

在这个方法中，我们使用 axios.post 方法发送一个 POST 请求到 /api/login 路径，同时传递用户名和密码。如果请求成功，我们可以从响应中获取用户信息。如果请求失败，我们可以从错误对象中获取错误信息。

3. 处理登陆结果

在 login 方法中，我们需要根据登陆结果来决定下一步的行动。如果登陆成功，我们需要将用户信息存储在本地并跳转到用户个人主页。如果登陆失败，我们需要显示错误消息并保留登陆表单。

在 Vue.js 中，我们可以使用 this.$router.push 方法来跳转到一个新的路由。我们可以将用户信息存储在浏览器的本地存储中，以便在用户下次访问应用程序时可以自动登陆。以下是一个简单的处理登陆结果的代码：

// www.javascriptcn.com code example
methods: {
  async login() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      const { data } = response;
      localStorage.setItem('user', JSON.stringify(data));
      this.$router.push('/user');
    } catch (error) {
      const { response } = error;
      if (response && response.status === 401) {
        alert('用户名或密码错误');
      } else {
        alert('登陆失败，请稍后再试');
      }
    }
  }
}

在这个代码中，我们使用 localStorage.setItem 方法将用户信息存储在本地存储中。然后，我们使用 this.$router.push 方法跳转到 /user 路由。如果登陆失败，我们根据错误的状态码显示不同的错误消息。

4. 实现路由守卫

在用户访问个人主页之前，我们需要检查用户是否已经登陆。我们可以使用 Vue.js 的路由守卫来实现这一功能。以下是一个简单的路由守卫的代码：

// www.javascriptcn.com code example
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      meta: { requiresAuth: true }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const user = JSON.parse(localStorage.getItem('user'));
    if (!user) {
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

在这个代码中，我们使用 meta.requiresAuth 属性来标记需要认证的路由。在路由守卫中，我们检查本地存储中是否存在用户信息。如果不存在，我们将用户重定向到登陆页面。否则，我们允许用户访问该路由。

示例代码

以下是完整的示例代码：

// www.javascriptcn.com code example
<template>
  <form @submit.prevent="login">
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" v-model="password">
    <br>
    <button type="submit">登陆</button>
  </form>
</template>

<script>
import axios from 'axios';
import VueRouter from 'vue-router';
import User from './User.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/user',
      component: User,
      meta: { requiresAuth: true }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const user = JSON.parse(localStorage.getItem('user'));
    if (!user) {
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        const { data } = response;
        localStorage.setItem('user', JSON.stringify(data));
        this.$router.push('/user');
      } catch (error) {
        const { response } = error;
        if (response && response.status === 401) {
          alert('用户名或密码错误');
        } else {
          alert('登陆失败，请稍后再试');
        }
      }
    }
  },
  router
};
</script>

在这个代码中，我们创建了一个包含登陆表单和路由守卫的 Vue.js 组件。我们使用 axios 发送 HTTP 请求，使用 VueRouter 实现路由功能。我们还使用了本地存储来存储用户信息。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d24894a941bf71344578a1

在 Vue.js 中实现简单的登陆认证