How to implement login verification function in Vue

How to implement login verification function in Vue, specific code examples are required

Vue is a popular JavaScript framework that can help developers build efficient web applications . In many web applications, user login authentication is a crucial part. This article will introduce you to how to implement the login verification function in Vue and provide you with specific code examples.

1. Create a login form

First, we need to create a login form. The form should include input boxes so users can enter their username and password.

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

2. Add Vue instance data

We need to add data to the Vue instance to store the user name and password entered by the user, and record whether the user logs in successfully.

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      isLoggedIn: false
    };
  },
  methods: {
    login() {
      // 验证用户的用户名和密码
      if (this.username === "admin" && this.password === "password") {
        // 如果验证通过，则将isLoggedIn设置为true，表示已经成功登录
        this.isLoggedIn = true;
      } else {
        alert("用户名或密码不正确");
      }
    }
  }
};
</script>

In this Vue instance, we added a method login() to verify whether the user's input is correct. If the username and password are verified successfully, we will set the isLoggedIn variable to true, indicating that the user has successfully logged in.

3. Display different content based on whether the user logs in successfully

We need to determine the content that needs to be displayed based on whether the user logs in successfully. If the user has successfully logged in, then we can show the user's personal information, otherwise we need to show the login form.

<template>
  <div>
    <!-- 如果用户已经成功登录，则展示用户信息 -->
    <div v-if="isLoggedIn">
      <h1 id="欢迎-username">欢迎 {{ username }}</h1>
      <button @click.prevent="logout">退出</button>
    </div>
    <!-- 如果用户未登录，则展示登录表单 -->
    <div v-else>
      <form>
        <label>用户名:</label>
        <input type="text" v-model="username">
        <br>
        <label>密码:</label>
        <input type="password" v-model="password">
        <br>
        <button type="submit" @click.prevent="login">登录</button>
      </form>
    </div>
  </div>
</template>

We use Vue's conditional rendering instructions to display different content based on the value of the isLoggedIn variable.

4. Add logout function

Finally, we need to provide users with the ability to log out. When the user clicks the "Exit" button, we will set the isLoggedIn variable to false, indicating that the user has logged out.

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      isLoggedIn: false
    };
  },
  methods: {
    login() {
      // 验证用户的用户名和密码
      if (this.username === "admin" && this.password === "password") {
        // 如果验证通过，则将isLoggedIn设置为true，表示已经成功登录
        this.isLoggedIn = true;
      } else {
        alert("用户名或密码不正确");
      }
    },
    logout() {
      // 将isLoggedIn设置为false，表示用户已经退出登录
      this.isLoggedIn = false;
    }
  }
};
</script>

Now you can use the above code in your Vue application to implement the login verification functionality. When users enter the correct username and password, they will be able to access your application. If they want to exit the application, they can simply click the "Exit" button.

The above is the detailed content of How to implement login verification function in Vue. For more information, please follow other related articles on the PHP Chinese website!