在使用Vue開發網站時，我們經常需要為後台管理新增一個單獨的登陸頁面。這樣做可以增強網站的安全性，防止未經授權的使用者存取後台管理介面，並可以為管理員提供更好的管理功能。
下面我們來介紹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>在這段程式碼中，我們建立了一個Login元件，並新增了一個簡單的表單，用於輸入使用者名稱和密碼。當使用者點擊「登陸」按鈕時，我們將向後台發送登入請求。我們在後續的步驟中來實現這個功能。
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元件建立了一個單獨的路由，當存取「/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))
}在這段程式碼中，我們建立了一個login函數，用於向背景發送登入請求。我們在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
}在這段程式碼中，我們建立了一個auth對象，並加入了setToken和login兩個函數。 setToken函數用於設定鑑權的Token值，login函數用於向背景發送登入的HTTP請求，並設定鑑權狀態的Token值。
我們需要在src/store/index.js檔案中引用這個auth.js，在modules中加入以下程式碼：
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中文網其他相關文章！
