Comment ajouter une fonction de connexion distincte pour la gestion en arrière-plan dans Vue

Lorsque nous utilisons Vue pour développer un site Web, nous devons souvent ajouter une page de connexion distincte pour la gestion du backend. Cela peut améliorer la sécurité du site Web, empêcher les utilisateurs non autorisés d'accéder à l'interface de gestion principale et fournir aux administrateurs de meilleures capacités de gestion.

Présentons comment ajouter une fonction de connexion distincte pour la gestion en arrière-plan dans Vue.

1. Créer une page de connexion en arrière-plan

Dans le projet Vue, nous pouvons créer un nouveau composant comme page de connexion en arrière-plan. Tout d'abord, créez un fichier Login.vue dans le répertoire src/components. Ajoutez le code suivant au fichier 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>

Dans ce code, nous créons un composant de connexion et ajoutons un formulaire simple pour saisir le nom d'utilisateur et le mot de passe. Lorsque l'utilisateur clique sur le bouton "Connexion", nous enverrons une demande de connexion en arrière-plan. Nous implémenterons cette fonction dans les étapes suivantes.

2. Ajouter un routage

Dans le routage de Vue, nous pouvons créer un itinéraire séparé pour la page de connexion en arrière-plan. Tout d'abord, ajoutez le code suivant au fichier 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
    }
  ]
})

Dans ce code, nous créons une route distincte pour le composant Login, lors de l'accès au chemin "/login", passez à la page de connexion.

3. Créer une interface API

Dans Vue, nous pouvons utiliser la bibliothèque Axios pour envoyer des requêtes HTTP en arrière-plan. Tout d’abord, créez un fichier api.js dans le répertoire src/services. Ajoutez le code suivant à 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))
}

Dans ce code, nous créons une fonction de connexion pour envoyer une demande de connexion en arrière-plan. Nous définissons l'URL de base de l'API backend dans config.js. Dans cet exemple, nous utilisons la bibliothèque Axios pour envoyer des requêtes HTTP, mais d'autres bibliothèques peuvent également être utilisées.

4. Ajouter la fonction d'authentification de gestion en arrière-plan

Lorsque l'administrateur se connecte, nous devons ajouter la fonction d'authentification pour l'administrateur. Dans Vue, nous pouvons utiliser Vuex pour gérer les états et utiliser ces états globalement dans le site Web. Tout d'abord, créez un fichier auth.js dans le répertoire src/store pour gérer l'état d'authentification. Ajoutez le code suivant à 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
}

Dans ce code, nous créons un objet auth et ajoutons les fonctions setToken et login. La fonction setToken est utilisée pour définir la valeur du jeton pour l'authentification, et la fonction de connexion est utilisée pour envoyer une requête HTTP de connexion en arrière-plan et définir la valeur du jeton pour l'état d'authentification.

Nous devons référencer cet auth.js dans le fichier src/store/index.js et ajouter le code suivant dans les modules :

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

Vue.use(Vuex)

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

Maintenant, nous avons terminé la gestion en arrière-plan Ajoutez la fonction de connexion séparée. Lorsque les administrateurs accèdent à la page de gestion du backend, ils doivent saisir leur nom d'utilisateur et leur mot de passe pour se connecter. Après une connexion réussie, nous utilisons Vuex pour la gestion des statuts et ajoutons des fonctions d'authentification pour les administrateurs afin de garantir la sécurité de l'interface de gestion backend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!