How to use Vue for user login and authentication

How to use Vue for user login and authentication

Introduction:
In today's Internet era, user login and authentication are important functions of almost all web applications. As a modern JavaScript framework, Vue provides us with a simple and efficient way to manage user login and authentication. This article will show you how to use Vue to implement user login and authentication, and provide code examples.

1. Preparation:
Before we start, we need to ensure that Node.js and Vue CLI have been installed. If it is not installed yet, you can install it through the following link:
Node.js: https://nodejs.org/
Vue CLI: https://cli.vuejs.org/

2. Create a Vue project:
Use the following command to create a new Vue project:

vue create login-app

According to the prompts, select the default configuration or custom configuration to create a Vue project.

3. Set routing:
Create a new routing folder in the src directory of the Vue project and create an index.js file in it. In the index.js file, we will set up two routes: login page and home page.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In the above code, we set up two routes, one is the login page (Login) and the other is the home page (Home). We also define a meta field to specify which routes require authentication.

4. Create view components:
Create a new views folder in the src directory of the Vue project, and create two view components, Login.vue and Home.vue, in it. Define the content and style of the login page and home page respectively.

<!-- src/views/Login.vue -->

<template>
  <div>
    <h1>Login</h1>
    <input type="text" v-model="username" placeholder="Username">
    <input type="password" v-model="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在此处编写登录逻辑
    }
  }
}
</script>

<!-- src/views/Home.vue -->

<template>
  <div>
    <h1>Welcome to Home</h1>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      // 在此处编写退出登录逻辑
    }
  }
}
</script>

In the above code, we defined two view components, Login.vue and Home.vue respectively. In the Login.vue component, we use v-model to bind the value of the input box to the username and password in data. At the same time, the login method is called when the login button is clicked to handle the user login logic. In the Home.vue component, we define a logout method to handle the user's logout logic.

5. Add authentication logic:
Create a new plugins folder in the src directory of the Vue project and create the auth.js file in it. In the auth.js file, we will write the logic to implement user login and authentication.

// src/plugins/auth.js

export default {
  install(Vue) {
    Vue.prototype.$auth = {
      isAuthenticated: false,
      login(username, password) {
        // 在此处编写用户登录验证逻辑
        if (username === 'admin' && password === 'admin') {
          this.isAuthenticated = true
          return Promise.resolve()
        } else {
          return Promise.reject(new Error('Invalid username or password'))
        }
      },
      logout() {
        // 在此处编写用户退出登录逻辑
        this.isAuthenticated = false
        return Promise.resolve()
      }
    }
  }
}

In the above code, we define an $auth object, which contains three fields and two methods. The isAuthenticated field is used to determine whether the user has logged in. The login method is used to verify whether the username and password are correct. If correct, the isAuthenticated field is set to true, otherwise an error object is returned. The logout method is used to log out and set the isAuthenticated field to false.

6. Register the auth plug-in in main.js:
Open the main.js file in the src directory of the Vue project and register the auth plug-in in it.

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import auth from './plugins/auth'

Vue.config.productionTip = false

Vue.use(auth)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

7. Authentication in the routing guard:
In the index.js file under the router folder in the src directory of the Vue project, we add a routing guard for authentication.

// src/router/index.js

// ...省略其他代码

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = Vue.prototype.$auth.isAuthenticated

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

// ...省略其他代码

In the above code, we use Vue.prototype.$auth.isAuthenticated to determine whether the user is logged in. If the user tries to access a route that requires authentication, but is not logged in, redirect them to the login page.

8. Use the $auth object in the login page and home page:
In the Login.vue and Home.vue components, we can access the $auth object through this.$auth for user login. and log out operations.

<!-- src/views/Login.vue -->

<template>
  <!-- 省略其他代码 -->
  <button @click="login">Login</button>
</template>

<script>
export default {
  // 省略其他代码
  methods: {
    login() {
      this.$auth.login(this.username, this.password)
        .then(() => {
          this.$router.push('/home')
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<!-- src/views/Home.vue -->

<template>
  <!-- 省略其他代码 -->
  <button @click="logout">Logout</button>
</template>

<script>
export default {
  // 省略其他代码
  methods: {
    logout() {
      this.$auth.logout()
        .then(() => {
          this.$router.push('/')
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

In the above code, we use this.$auth.login to handle user login logic, and if successful, use this.$router.push to jump to the homepage. Use this.$auth.logout to handle the user logout logic, and use this.$router.push to jump to the login page after success.

Conclusion:
Through this article, we learned how to use Vue for user login and authentication. By setting up routes, creating view components, adding authentication logic, registering auth plugins, and using $auth objects in route guards and components, we successfully implemented user login and authentication functionality. I hope this article is helpful for you to understand and use Vue for user login and authentication.

The above is the detailed content of How to use Vue for user login and authentication. For more information, please follow other related articles on the PHP Chinese website!