How to add separate login function for background management in Vue

When using Vue to develop a website, we often need to add a separate login page for background management. Doing so can enhance the security of the website, prevent unauthorized users from accessing the backend management interface, and provide administrators with better management capabilities.

Let’s introduce how to add background management separate login function to Vue.

1. Create a background login page

In the Vue project, we can create a new component as the background login page. First, create a Login.vue file in the src/components directory. Add the following code to the Login.vue file:

<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>

In this code, we create a Login component and add a simple form for entering username and password. When the user clicks the "Login" button, we will send a login request to the background. We will implement this function in subsequent steps.

2. Add routing

In Vue’s routing, we can create a separate route for the background login page. First, add the following code to the src/router/index.js file:

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
    }
  ]
})

In this code, we create a separate route for the Login component. When accessing the "/login" path, it will Jump to the Login page.

3. Create API interface

In Vue, we can use the Axios library to send HTTP requests to the background. First, create an api.js file in the src/services directory. Add the following code to 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))
}

In this code, we create a login function to send a login request to the background. We define the base URL of the backend API in config.js. In this example, we use the Axios library to send HTTP requests, but other libraries can also be used.

4. Add background management authentication function

When the administrator logs in, we need to add the authentication function for the administrator. In Vue, we can use Vuex to manage states and use these states globally in the website. First, create an auth.js file in the src/store directory to manage the authentication status. Add the following code to 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
}

In this code, we create an auth object and add the setToken and login functions. The setToken function is used to set the token value for authentication, and the login function is used to send a login HTTP request to the background and set the token value for the authentication status.

We need to reference this auth.js in the src/store/index.js file and add the following code in modules:

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

Vue.use(Vuex)

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

Now we have completed adding a separate login for background management Function. When administrators access the backend management page, they need to enter their username and password to log in. After successful login, we use Vuex for status management and add authentication functions for administrators to ensure the security of the backend management interface.

The above is the detailed content of How to add separate login function for background management in Vue. For more information, please follow other related articles on the PHP Chinese website!