前端项目实践经验，Vue从零搭建权限管理系统，构建多功能、高保密的现代化网站

2023-10-11 07:15:41

在现代Web开发中，前后端分离已成为主流。它不仅可以提高开发效率，还能增强应用程序的安全性。本文将以Vue框架为例，介绍如何实现前后端分离的网站权限管理系统。

登录和注册

登录和注册是权限管理系统中最基本的功能。我们首先需要在Vue项目中实现这两个功能。

  loginByEmail({ commit }, { username, password }) {
    return new Promise((resolve, reject) => {
      this._vm.$axios({
        url: 'http://localhost:8080/login',
        method: 'post',
        data: {
          username,
          password
        }
      }).then((res) => {
        // 假设从服务器端拿到了token（唯一标示用户身份）
        const token = res.data.token
        // 将token放到浏览器本地Cookie
        this._vm.$cookies.set('token', token)
        commit('SET_TOKEN', token)
        resolve(res.data)
      }).catch((error) => {
        reject(error)
      })
    })
  }

这段代码很简单，首先发送一个POST请求到服务器端登录接口，然后将服务器端返回的token存放到浏览器本地Cookie中，最后将token提交给Vuex store。

注册

注册的过程与登录类似，只需在服务器端实现一个注册接口，然后在Vue项目中实现一个注册表单即可。

用户信息管理

用户信息管理是权限管理系统的重要组成部分。它允许管理员管理用户的信息，如用户名、密码、邮箱、电话号码等。

在Vue项目中，我们可以使用Vuex store来管理用户信息。首先在store中定义一个用户信息的状态，然后在组件中使用这个状态。

// store.js
export const store = new Vuex.Store({
  state: {
    userInfo: {}
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    // ...省略其他action
    getUserInfo({ commit }) {
      return new Promise((resolve, reject) => {
        this._vm.$axios({
          url: 'http://localhost:8080/user/info',
          method: 'get',
          headers: {
            Authorization: 'Bearer ' + this._vm.$cookies.get('token')
          }
        }).then((res) => {
          commit('SET_USER_INFO', res.data)
          resolve(res.data)
        }).catch((error) => {
          reject(error)
        })
      })
    }
  }
})

// Userinfo.vue
<template>
  <div>
    <p>用户名：{{ userInfo.username }}</p>
    <p>密码：{{ userInfo.password }}</p>
    <p>邮箱：{{ userInfo.email }}</p>
    <p>电话号码：{{ userInfo.phone }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Userinfo',
  computed: {
    ...mapState(['userInfo'])
  },
  mounted() {
    this.$store.dispatch('getUserInfo')
  }
}
</script>

权限控制

权限控制是权限管理系统中最复杂的部分。它允许管理员控制用户对不同资源的访问权限。

在Vue项目中，我们可以使用Vue路由的meta属性来实现权限控制。meta属性是一个对象，可以包含任意数据。我们可以将用户的权限信息存储在meta属性中，然后在路由守卫中检查用户的权限，以决定是否允许用户访问该路由。

// router.js
export const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        // 需要管理员权限
        permission: 'admin'
      }
    },
    {
      path: '/user/info',
      name: 'Userinfo',
      component: Userinfo,
      meta: {
        // 需要登录权限
        permission: 'login'
      }
    }
  ]
})

// main.js
router.beforeEach((to, from, next) => {
  if (to.meta.permission) {
    const token = this.$cookies.get('token')
    if (token) {
      // 调用API接口获取用户信息
      this.$store.dispatch('getUserInfo').then(() => {
        const userInfo = this.$store.state.userInfo
        if (userInfo.permission === to.meta.permission) {
          next()
        } else {
          next({ path: '/403' })
        }
      })
    } else {
      next({ path: '/login' })