Vue如何添加后台管理单独登陆功能-前端问答-PHP中文网

Vue如何添加后台管理单独登陆功能

PHPz

发布： 2023-04-26 14:22:01

原创

1008人浏览过

在使用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接口

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

查看详情

在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中文网其它相关文章！