Cara menggunakan Vue untuk log masuk dan pengesahan pengguna

Cara menggunakan Vue untuk log masuk dan pengesahan pengguna

Pengenalan:
Dalam era Internet hari ini, log masuk dan pengesahan pengguna adalah fungsi penting bagi hampir semua aplikasi web. Sebagai rangka kerja JavaScript moden, Vue menyediakan kami cara yang mudah dan cekap untuk mengurus log masuk dan pengesahan pengguna. Artikel ini akan menunjukkan kepada anda cara menggunakan Vue untuk melaksanakan log masuk dan pengesahan pengguna serta memberikan contoh kod.

1. Penyediaan:
Sebelum kita mula, kita perlu memastikan bahawa Node.js dan Vue CLI telah dipasang. Jika ia belum dipasang, anda boleh memasangnya melalui pautan berikut:
Node.js: https://nodejs.org/
Vue CLI: https://cli.vuejs.org/

2. Cipta Vue projek:
Gunakan arahan berikut Cipta projek Vue baharu:

vue create login-app

Ikut gesaan dan pilih konfigurasi lalai atau konfigurasi tersuai untuk mencipta projek Vue.

3. Tetapkan penghalaan:
Buat folder penghalaan baharu dalam direktori src projek Vue dan buat fail index.js di dalamnya. Dalam fail index.js, kami akan menyediakan dua laluan: halaman log masuk dan halaman utama.

// 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

Dalam kod di atas, kami menyediakan dua laluan, satu adalah halaman log masuk (Log Masuk) dan satu lagi adalah halaman utama (Rumah). Kami juga mentakrifkan medan meta untuk menentukan laluan mana yang memerlukan pengesahan.

4 Cipta komponen paparan:
Buat folder paparan baharu dalam direktori src projek Vue dan buat dua komponen paparan, Login.vue dan Home.vue, di dalamnya. Tentukan kandungan dan gaya halaman log masuk dan halaman utama masing-masing.

<!-- 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>

Dalam kod di atas, kami menentukan dua komponen paparan, Login.vue dan Home.vue masing-masing. Dalam komponen Login.vue, kami menggunakan v-model untuk mengikat nilai kotak input kepada nama pengguna dan kata laluan dalam data. Pada masa yang sama, kaedah log masuk dipanggil apabila butang log masuk diklik untuk mengendalikan logik log masuk pengguna. Dalam komponen Home.vue, kami mentakrifkan kaedah log keluar untuk mengendalikan logik log keluar pengguna.

5. Tambahkan logik pengesahan:
Buat folder pemalam baharu dalam direktori src projek Vue dan buat fail auth.js di dalamnya. Dalam fail auth.js, kami akan menulis logik untuk melaksanakan log masuk dan pengesahan pengguna.

// 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()
      }
    }
  }
}

Dalam kod di atas, kami mentakrifkan objek $auth dengan tiga medan dan dua kaedah. Medan isAuthenticated digunakan untuk menentukan sama ada pengguna telah log masuk. Kaedah log masuk digunakan untuk mengesahkan sama ada nama pengguna dan kata laluan adalah betul Jika betul, medan isAuthenticated ditetapkan kepada benar, jika tidak objek ralat dikembalikan. Kaedah log keluar digunakan untuk log keluar dan menetapkan medan isAuthenticated kepada palsu.

6. Daftar pemalam auth dalam main.js:
Buka fail main.js dalam direktori src projek Vue dan daftar pemalam auth di dalamnya.

// 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. Pengesahan dalam pengawal penghalaan:
Dalam fail index.js di bawah folder penghala dalam direktori src projek Vue, kami menambah pengawal penghalaan untuk pengesahan.

// 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()
  }
})

// ...省略其他代码

Dalam kod di atas, kami menggunakan Vue.prototype.$auth.isAuthenticated untuk menentukan sama ada pengguna telah log masuk. Jika pengguna cuba mengakses laluan yang memerlukan pengesahan, tetapi tidak log masuk, ubah hala mereka ke halaman log masuk.

8 Gunakan objek $auth dalam halaman log masuk dan halaman utama:
Dalam komponen Login.vue dan Home.vue, kami boleh mengakses objek $auth melalui ini.$auth untuk melaksanakan operasi log masuk dan log keluar pengguna.

<!-- 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>

Dalam kod di atas, kami menggunakan ini.$auth.login untuk mengendalikan logik log masuk pengguna, dan jika berjaya, gunakan ini.$router.push untuk melompat ke halaman utama. Gunakan ini.$auth.logout untuk mengendalikan logik log keluar pengguna, dan gunakan ini.$router.push untuk melompat ke halaman log masuk selepas berjaya.

Kesimpulan:
Melalui artikel ini, kami mempelajari cara menggunakan Vue untuk log masuk dan pengesahan pengguna. Dengan menyediakan laluan, mencipta komponen paparan, menambah logik pengesahan, mendaftarkan pemalam pengesahan dan menggunakan objek $auth dalam pengawal dan komponen laluan, kami berjaya melaksanakan fungsi log masuk dan pengesahan pengguna. Saya harap artikel ini membantu anda memahami dan menggunakan Vue untuk log masuk dan pengesahan pengguna.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk log masuk dan pengesahan pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!