Vue에서 백그라운드 관리를 위한 별도의 로그인 기능을 추가하는 방법

Vue를 사용하여 웹사이트를 개발할 때 백엔드 관리를 위해 별도의 로그인 페이지를 추가해야 하는 경우가 많습니다. 이를 통해 웹사이트의 보안을 강화하고, 무단 사용자가 백엔드 관리 인터페이스에 액세스하는 것을 방지하며, 관리자에게 더 나은 관리 기능을 제공할 수 있습니다.

Vue에서 백그라운드 관리를 위한 별도 로그인 기능을 추가하는 방법을 소개하겠습니다.

1. 백그라운드 로그인 페이지 만들기

Vue 프로젝트에서 백그라운드 로그인 페이지로 새 구성 요소를 만들 수 있습니다. 먼저 src/comComponents 디렉터리에 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))
}

이 코드에서는 로그인 요청을 백그라운드로 보내는 로그인 함수를 만듭니다. config.js에서 백엔드 API의 기본 URL을 정의합니다. 이 예에서는 Axios 라이브러리를 사용하여 HTTP 요청을 보내지만 다른 라이브러리도 사용할 수 있습니다.

4. 백그라운드 관리 인증 기능 추가

관리자 로그인 시 관리자에 대한 인증 기능을 추가해야 합니다. Vue에서는 Vuex를 사용하여 상태를 관리하고 웹사이트에서 전역적으로 이러한 상태를 사용할 수 있습니다. 먼저 src/store 디렉토리에 auth.js 파일을 생성하여 인증 상태를 관리합니다. 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 함수는 인증을 위한 토큰 값을 설정하는 데 사용되고, 로그인 함수는 로그인 HTTP 요청을 백그라운드로 보내고 인증 상태에 대한 토큰 값을 설정하는 데 사용됩니다.

src/store/index.js 파일에서 이 auth.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!