So fügen Sie eine separate Anmeldefunktion für die Hintergrundverwaltung in Vue hinzu

Wenn wir Vue zum Entwickeln einer Website verwenden, müssen wir häufig eine separate Anmeldeseite für die Backend-Verwaltung hinzufügen. Dies kann die Sicherheit der Website erhöhen, den Zugriff unbefugter Benutzer auf die Backend-Verwaltungsschnittstelle verhindern und Administratoren bessere Verwaltungsfunktionen bieten.

Lassen Sie uns vorstellen, wie Sie eine separate Anmeldefunktion für die Hintergrundverwaltung in Vue hinzufügen.

1. Erstellen Sie eine Hintergrund-Anmeldeseite

Im Vue-Projekt können wir eine neue Komponente als Hintergrund-Anmeldeseite erstellen. Erstellen Sie zunächst eine Login.vue-Datei im Verzeichnis src/components. Fügen Sie der Datei Login.vue den folgenden Code hinzu:

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

In diesem Code erstellen wir eine Login-Komponente und fügen ein einfaches Formular zur Eingabe von Benutzername und Passwort hinzu. Wenn der Benutzer auf die Schaltfläche „Anmelden“ klickt, senden wir im Hintergrund eine Anmeldeanfrage. Wir werden diese Funktion in den folgenden Schritten implementieren.

2. Routing hinzufügen

Im Routing von Vue können wir eine separate Route für die Hintergrund-Anmeldeseite erstellen. Fügen Sie zunächst den folgenden Code zur Datei src/router/index.js hinzu:

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
    }
  ]
})

In diesem Code erstellen wir eine separate Route für die Login-Komponente. Beim Zugriff auf den Pfad „/login“ wird zur Login-Seite gesprungen.

3. API-Schnittstelle erstellen

In Vue können wir die Axios-Bibliothek verwenden, um HTTP-Anfragen an den Hintergrund zu senden. Erstellen Sie zunächst eine api.js-Datei im Verzeichnis src/services. Fügen Sie api.js den folgenden Code hinzu:

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

In diesem Code erstellen wir eine Anmeldefunktion, um eine Anmeldeanforderung an den Hintergrund zu senden. Wir definieren die Basis-URL der Backend-API in config.js. In diesem Beispiel verwenden wir die Axios-Bibliothek zum Senden von HTTP-Anfragen, es können aber auch andere Bibliotheken verwendet werden.

4. Authentifizierungsfunktion für die Hintergrundverwaltung hinzufügen

Wenn sich der Administrator anmeldet, müssen wir die Authentifizierungsfunktion für den Administrator hinzufügen. In Vue können wir mit Vuex Zustände verwalten und diese Zustände global auf der Website nutzen. Erstellen Sie zunächst eine auth.js-Datei im Verzeichnis src/store, um den Authentifizierungsstatus zu verwalten. Fügen Sie den folgenden Code zu auth.js hinzu:

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
}

In diesem Code erstellen wir ein Auth-Objekt und fügen die Funktionen setToken und login hinzu. Die setToken-Funktion wird verwendet, um den Token-Wert für die Authentifizierung festzulegen, und die Login-Funktion wird verwendet, um eine HTTP-Anmeldeanforderung an den Hintergrund zu senden und den Token-Wert für den Authentifizierungsstatus festzulegen.

Wir müssen auf diese auth.js in der Datei src/store/index.js verweisen und den folgenden Code in Modulen hinzufügen:

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

Vue.use(Vuex)

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

Jetzt haben wir das Hinzufügen einer separaten Anmeldefunktion für die Hintergrundverwaltung abgeschlossen. Wenn Administratoren auf die Backend-Verwaltungsseite zugreifen, müssen sie ihren Benutzernamen und ihr Passwort eingeben, um sich anzumelden. Nach erfolgreicher Anmeldung nutzen wir Vuex zur Statusverwaltung und fügen Authentifizierungsfunktionen für Administratoren hinzu, um die Sicherheit der Hintergrundverwaltungsoberfläche zu gewährleisten.

Das obige ist der detaillierte Inhalt vonSo fügen Sie eine separate Anmeldefunktion für die Hintergrundverwaltung in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!