后台管理中如何实现权限管理

最新推荐文章于 2024-07-15 10:18:17 发布

pretty~

最新推荐文章于 2024-07-15 10:18:17 发布

阅读量3.2k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45703808/article/details/105254869

版权

本文介绍了在Vue项目中如何进行后台管理的权限控制。通过角色分配权限，具体步骤包括创建Vue脚手架，构建组件并设置路由，实现在login组件中处理登录逻辑，根据角色判断权限，使用axios请求与后端交互，以及封装transRouter函数来实现业务逻辑。

摘要由CSDN通过智能技术生成

在项目后台管理项目开发中经常会遇到权限的功能，今天我就好好整理一下，如何实现权限管理。
权限管理：通过角色分配权限
接下来时具体实现的步骤
1，创建vue脚手架
2，创建组件，并匹配路由规则

备注：rights文件夹下是侧边栏的子路由，通过动态路由addRoutes获取，后面会写如何是实现；sideBar.vue是侧边栏组件，注册为Home的私有组件

//route/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/',
    name: 'login',
    component: () => import( '../components/Login.vue'),
  },
  {
   
    path: '/home',
    name: 'home',
    component: () => import( '../components/Home.vue'),
  },
]

const router = new VueRouter({
   
  routes
})

export default router

3，在login组件里面写登录业务逻辑

//login页面，视图层代码
<template>
  <div>
    <form>
      <div>
        <label>用户名</label>
        <input type="text" v-model="userInfo.username" placeholder="请输入用户名">
      </div>
      <div>
        <label>密码</label>
        <input type="text" v-model="userInfo.password" placeholder="请输入密码">
      <