Vue でバックグラウンド管理用に別のログイン機能を追加する方法

Vue を使用して Web サイトを開発する場合、多くの場合、バックグラウンド管理のために別のログイン ページを追加する必要があります。これにより、Web サイトのセキュリティが強化され、権限のないユーザーがバックエンド管理インターフェイスにアクセスするのを防ぎ、管理者に優れた管理機能を提供できます。

Vueにバックグラウンド管理別ログイン機能を追加する方法を紹介します。

1. バックグラウンド ログイン ページの作成

Vue プロジェクトでは、バックグラウンド ログイン ページとして新しいコンポーネントを作成できます。まず、src/components ディレクトリに Login.vue ファイルを作成します。次のコードを 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>

このコードでは、ログイン コンポーネントを作成し、ユーザー名とパスワードを入力するための単純なフォームを追加します。ユーザーが「ログイン」ボタンをクリックすると、バックグラウンドでログイン要求が送信されます。この関数は後続のステップで実装します。

2. ルーティングの追加

Vue のルーティングでは、バックグラウンド ログイン ページ用に別のルートを作成できます。まず、次のコードを 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
    }
  ]
})

このコードでは、ログイン コンポーネント用に別のルートを作成します。「/login」パスにアクセスすると、ジャンプします。ログインページへ。

3. API インターフェイスの作成

Vue では、Axios ライブラリを使用して HTTP リクエストをバックグラウンドに送信できます。まず、src/services ディレクトリに api.js ファイルを作成します。次のコードを 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))
}

このコードでは、ログイン リクエストをバックグラウンドに送信するログイン関数を作成します。バックエンド API のベース URL を config.js で定義します。この例では、Axios ライブラリを使用して HTTP リクエストを送信しますが、他のライブラリも使用できます。

4. バックグラウンド管理認証機能の追加

管理者がログインする際に、管理者用の認証機能を追加する必要があります。 Vue では、Vuex を使用して状態を管理し、これらの状態を Web サイト内でグローバルに使用できます。まず、認証ステータスを管理するための auth.js ファイルを src/store ディレクトリに作成します。次のコードを 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
}

このコードでは、認証オブジェクトを作成し、setToken 関数とログイン関数を追加します。 setToken 関数は認証用のトークン値を設定するために使用され、login 関数はログイン HTTP リクエストをバックグラウンドに送信し、認証ステータスのトークン値を設定するために使用されます。

この auth.js を src/store/index.js ファイルで参照し、モジュールに次のコードを追加する必要があります:

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

Vue.use(Vuex)

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

これで、バックグラウンド管理用の別のログインの追加が完了しました。関数。管理者がバックエンド管理ページにアクセスする場合、ユーザー名とパスワードを入力してログインする必要があります。ログイン成功後は、ステータス管理に Vuex を使用し、管理者向けの認証機能を追加してバックエンド管理インターフェイスのセキュリティを確保します。

以上がVue でバックグラウンド管理用に別のログイン機能を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。