前言：本项目是基于网络上大家都比较熟悉的vue-element-template后台项目模版进行开发的。主要实现了权限管理、动态路由、动态加载侧边栏，本方案可98%适用于各大后台管理中权限管理相关需求。本项目后端接口是基于nodejs+mongodb开发，如果有同学想学习接口开发，可以看上一篇文章express+mongodb实现登录注册、动态路由、权限管理等相关接口
对应视频教程
傻瓜式教程，只要你有js基础，保证你学的会！
首先，先来看一下成果展示。（图片）
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
这就是权限管理前端布局，各个功能都可以实现，包括按钮权限，页面权限，表格权限（具体到某行某列设置动态显示），表单权限（具体到某个表单元素设置动态显示）
陆续更新中。。。限时特价9.9，购买后可私信我索取源码
陆续更新中。。。限时特价9.9，购买后可私信我索取源码
- 下面开始开发，首先点击下载vue-admin-template模版,目录结构如下：
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
- 下载好了以后，打开vue.config.js文件注释掉
before: require('./mock/mock-server.js'),关闭eslint
image.png
image.png
- 打开router文件夹下的index.js，删除多余的路由，改成这样
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
- 删除views文件夹内的form、nested、table、tree文件夹，清空api文件夹内的文件，新建index.js
5.修改store/modules/user.js内的
import { login, logout, getInfo } from '@/api/user',user改成index
6.在vue.config.js配置反向代理
image.png
proxy: {
//配置跨域
'/api': {
target: "http://localhost:8888", //测试服接口地址
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
- 然后在.env.deveplopment文件内
VUE_APP_BASE_API = '/dev-api'改成VUE_APP_BASE_API = '/api',然后，重启项目，否则不生效
- 在api/index.js内把登录接口和获取用户详情和获取动态路由（侧边栏）接口配置好
import request from '@/utils/request'
//登录接口
export function login(data) {
return request({
url: '/admin/api/login',
method: 'post',
data
})
}
// 获取用户详情
export function getInfo(data) {
return request({
url: '/admin/api/boss/detail',
method: 'post',
data
})
}
// 动态路由
export function DongtRouter() {
return request({
url: `/aoaoe/api/getMoveRouter`,
method: 'get',
})
}
- 修改store/modules/user.js内的
import { login, logout, getInfo } from '@/api/index'改成import { login, DongtRouter, getInfo } from '@/api/index'
- 修改src/utils/request.js中的
config.headers['X-Token'] = getToken(),把X-Token改成后端需要的key值，这里根据实际情况需要改成token，config.headers['token'] = getToken()
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
上面👆这段代码，根据实际情况改，主要就是修改code值，如果，后端返回的code成功状态值是200，那么这里就改成200。
if (res.code === 50008 || res.code === 50012 || res.code === 50014)这里也根据后端返回的code按照实际情况来改，目前我没有动。
网友评论