Bagaimana untuk menambah fungsi log masuk berasingan untuk pengurusan latar belakang dalam Vue

Apabila menggunakan Vue untuk membangunkan tapak web, kami selalunya perlu menambah halaman log masuk yang berasingan untuk pengurusan bahagian belakang. Melakukannya boleh meningkatkan keselamatan tapak web, menghalang pengguna yang tidak dibenarkan daripada mengakses antara muka pengurusan bahagian belakang dan menyediakan pentadbir dengan keupayaan pengurusan yang lebih baik.

Mari perkenalkan cara menambah fungsi log masuk berasingan untuk pengurusan latar belakang dalam Vue.

1. Buat halaman log masuk latar belakang

Dalam projek Vue, kami boleh mencipta komponen baharu sebagai halaman log masuk latar belakang. Mula-mula, buat fail Login.vue dalam direktori src/components. Tambahkan kod berikut pada fail Login.vue:

<template>
  <div class="login">
    <h1>管理员登陆</h1>
    <form>
      <div>
        <label>用户名：</label>
        <input type="text" v-model="username">
      </div>
      <div>
        <label>密码：</label>
        <input type="password" v-model="password">
      </div>
      <div>
        <button type="submit" @click.prevent="login">登陆</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',

  data () {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    login () {
      // 向后台发送登录请求
    }
  }
}
</script>

<style scoped>
.login {
  width: 300px;
  margin: 0 auto;
}
.login h1 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}
.login form div {
  margin-bottom: 10px;
  text-align: center;
}
.login form label {
  display: inline-block;
  width: 80px;
}
.login form input {
  width: 180px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}
.login form button[type=submit] {
  width: 100px;
  height: 30px;
  margin-top: 20px;
  border: none;
  background-color: #409EFF;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
</style>

Dalam kod ini, kami mencipta komponen Log Masuk dan menambah borang mudah untuk memasukkan nama pengguna dan kata laluan. Apabila pengguna mengklik butang "Log Masuk", kami akan menghantar permintaan log masuk ke latar belakang. Kami akan melaksanakan fungsi ini dalam langkah seterusnya.

2. Tambahkan penghalaan

Dalam penghalaan Vue, kami boleh membuat laluan berasingan untuk halaman log masuk latar belakang. Mula-mula, tambahkan kod berikut pada fail src/router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

Dalam kod ini, kami mencipta laluan berasingan untuk komponen Log Masuk Apabila mengakses laluan "/login", akan lompat ke halaman Log Masuk.

3. Cipta antara muka API

Dalam Vue, kami boleh menggunakan pustaka Axios untuk menghantar permintaan HTTP ke latar belakang. Mula-mula, buat fail api.js dalam direktori src/services. Tambahkan kod berikut pada api.js:

import axios from 'axios'
import config from '../config'

export const login = (username, password) => {
  return axios.post(config.apiBaseUrl + '/login', { username, password })
    .then(response => response.data)
    .catch(error => console.log(error))
}

Dalam kod ini, kami mencipta fungsi log masuk untuk menghantar permintaan log masuk ke latar belakang. Kami mentakrifkan URL asas API bahagian belakang dalam config.js. Dalam contoh ini, kami menggunakan perpustakaan Axios untuk menghantar permintaan HTTP, tetapi perpustakaan lain juga boleh digunakan.

4. Tambah fungsi pengesahan pengurusan latar belakang

Apabila pentadbir log masuk, kita perlu menambah fungsi pengesahan untuk pentadbir. Dalam Vue, kami boleh menggunakan Vuex untuk mengurus negeri dan menggunakan negeri ini secara global dalam tapak web. Mula-mula, buat fail auth.js dalam direktori src/store untuk mengurus status pengesahan. Tambahkan kod berikut pada auth.js:

import { login } from '@/services/api'

const state = {
  token: null
}

const mutations = {
  setToken (state, token) {
    state.token = token
  }
}

const actions = {
  login ({ commit }, { username, password }) {
    return login(username, password)
      .then(token => {
        commit('setToken', token)
      })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

Dalam kod ini, kami mencipta objek auth dan menambah setToken dan fungsi log masuk. Fungsi setToken digunakan untuk menetapkan nilai token untuk pengesahan, dan fungsi log masuk digunakan untuk menghantar permintaan HTTP log masuk ke latar belakang dan menetapkan nilai token untuk status pengesahan.

Kami perlu merujuk auth.js ini dalam fail src/store/index.js dan menambah kod berikut dalam modul:

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})

Sekarang kami telah selesai menambah halaman berasingan untuk pengurusan latar belakang Fungsi log masuk. Apabila pentadbir mengakses halaman pengurusan bahagian belakang, mereka perlu memasukkan nama pengguna dan kata laluan mereka untuk log masuk. Selepas log masuk berjaya, kami menggunakan Vuex untuk pengurusan status dan menambah fungsi pengesahan untuk pentadbir bagi memastikan keselamatan antara muka pengurusan bahagian belakang.

Atas ialah kandungan terperinci Bagaimana untuk menambah fungsi log masuk berasingan untuk pengurusan latar belakang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!