vue项目实践-前后端分离关于权限的思路
前后端分离后权限的思路
最近看到许多关于权限的思路,但好像都是使用动态加载路由的方式,现在也分享下我在项目中使用的解决方案。
前后端分离关于权限的处理每个人都不一样,根据项目选择制定合适的方案就好
我的方案是:
- 前端挂载所有路由
- 通过 Api 接口获取用户权限标识(路由名称)
- 在路由切换的时候进行权限校验
- 至于页面的权限按钮则通过指令+自定义组件的形式封装成通用权限按钮,通过传入相应的标识判断是否现实按钮
- 大体流程如下图所示
前后端分离权限的实现
- 路由中定义是否需要验证权限:
meta:{ auth :true }
路由定义
若是后端项目,一般会包含公用的头部,侧边导航等公用的部分,这些部分可以将其抽象成一个个组件,创建布局页使其更简单的使用关于路由的引用,在大的项目中发现不适用懒加载能够更快的热更新,所以可以根据环境采取不同的加载方式一个简单的路由
路由结构图
_import.[env].js
:
生产环境( production )/ testing 的定义
module.exports = file => () => import('@/views/' + file + '.vue')
开发环境( development )的定义
module.exports = file => require('@/views/' + file + '.vue').default
路由导入代码
index.js
: 使用 vue-router 挂载路由
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import logic from './logic'
Vue.use(Router)
const router = new Router({
// mode: 'history',
routes
})
router.beforeEach(logic.beforeEach)
router.afterEach(logic.afterEach)
export default router
logic.js
: 路由钩子的实现
import { getInfo } from '@/api/modules/account'
const beforeEach = (to, from, next) => {
if (!to.meta.auth) {
return next()
}
if (!localStorage.token) {
return next('/login')
}
if (window.info) return next()
getInfo().then(res => {
localStorage.token = res.data.info.token
window.info = res.data.info
window.menus = res.data.menus
window.modules = res.data.modules
next()
})
}
const afterEach = (to, from) => {}
export default {
beforeEach,
afterEach
}
routes.js
:路由的模块定义
const _import = require('./_import_' + process.env.NODE_ENV)
export const appRouter = [
{
path: '/',
component: Layout,
children: [
{
path: '',
name: 'home',
component: _import('dashboard/index'),
meta: { defAuth: true, auth: true }
}
]
}
]
export const routes = [...appRouter]
接口定义
- account/login
登录成功返回 token,保存到本地跳转页面 - auth/info
校验是否有 token 信息及登录信息,无则发送请求获取登录信息,菜单及权限模块标识列表
菜单加载
新建 Layout 文件夹,将各部分组件再拆成小组件进行拼接后台组件,样式使用圣杯布局,然后稍加改动就能够实现基本的后台管理页布局
Layout 结构图
菜单结构:
"menus": [
{
"menuName": "控制台",
"menuIcon": null,
"menuCode": "home",
"menuUrl": null
},
{
"menuName": "系统管理",
"menuIcon": null,
"children": [
{
"menuName": "管理员管理",
"menuIcon": null,
"children": [
{
"menuName": "管理员列表",
"menuIcon": null,
"menuCode": "system-admin-list",
"menuUrl": null
}
]
},
{
"menuName": "角色列表",
"menuIcon": null,
"menuCode": "system-role-list",
"menuUrl": null
}
]
}
],
递归生成菜单组件
<template>
<dl>
<template v-for="(item,index) in menus">
<dt :key="item.menuName">
<a href="javascript:;" v-if="item.menuUrl" @click="$ui.redirect(item.menuUrl)">{{item.menuName}}</a>
<router-link :to="{name:item.menuCode}" v-else-if="item.menuCode">{{item.menuName}}</router-link>
<span v-else>{{item.menuName}}</span>
</dt>
<dd class="child-menu" :key="'c_'+index" v-if="item.children&&item.children.length>0">
<v-app-nav :menus="item.children" />
</dd>
</template>
</dl>
</template>
<script>
export default {
name: 'v-app-nav',
props: ['menus']
}
</script>
<style>
</style>
指令封装
可以通过指令传入需要的权限标识值,进行对按钮权限的控制,根据需要控制显示/启用
定义
export default {
auth: {
inserted: (el, binding) => {
if (window.modules.indexOf(binding.value) === -1) {
// el.remove()
el.setAttribute('disabled', 'disabled')
}
}
}
}
使用
对于常用的一些按钮,应封装到组件中,统一管理风格,也能使起更易维护
<button v-auth="'role_create_create'">添加</button>
相关链接
文中的实现可以在下面仓库中找到,不清楚的地方可以直接查看源码
vue项目实践-前后端分离关于权限的思路的更多相关文章
- Springboot + Vue + shiro 实现前后端分离、权限控制
本文总结自实习中对项目对重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...
- Spring Boot + Vue + Shiro 实现前后端分离、权限控制
本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...
- centos7 部署vue项目(前后端分离、nginx)
一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- Vue+Spring Boot 前后端分离的商城项目开源啦!
新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...
- springBoot 搭建web项目(前后端分离,附项目源代码地址)
springBoot 搭建web项目(前后端分离,附项目源代码地址) 概述 该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
- vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]
后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...
- vue+node+mongodb前后端分离博客系统
感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...
随机推荐
- iOS开发之HTTP与HTTPS网络请求
HTTP是互联网中应用最为广泛的一种网络协议,在进入正文之前,先解释什么是网络协议?网络协议为计算机网络中进行数据交换而建立的规则.标准或约定的集合.网络协议是由以下三个要素组成:语义.语法.时序.国 ...
- echarts 隐藏Y轴最大最小值label及分割线 ----障眼大发好使
需求图 1====>label 最大最小值还好弄, yAxis{ axisLabel{ showMinLabel: false, showMaxLabel: false, }} 2====> ...
- 错误笔记 对象为null时调用改对象的方法会报错
对象为null时调用改对象的方法会报错
- 2018-2019-2 20165328《网络对抗技术》Exp0 Kali安装week1
1.下载Kaili安装资源并解压安装到虚拟机: 2.修改默认字体与共享文件设置: 3.更新软件源与下载中文输入法: 4.安装完成.
- [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...
- sql server使用sql语句上传Excel到数据库
USE pro GO SELECT * INTO temp_budget_price@201704170950 FROM OPENDATASOURCE('Microsoft.Jet.OLE ...
- MFC-注册热键
0.测试环境 VS2015专业版,基于对话框的MFC程序, 例子地址:http://pan.baidu.com/s/1qX9IRec 1.MFC工程设置 类向导->消息->WM_HOTKE ...
- Visual Studio Code 搭建Python开发环境
1.下载Python https://www.python.org/downloads/windows/ 选择一个版本,目前2.0的源码比较多,我下载的2.7.12 2.配置环境变量 3.Visual ...
- maya cmds pymel 选择 uv area(uv 面积) 为0 的面
maya cmds pymel 选择 uv area(uv 面积) 为0 的面 cmds.selectType( pf=True ) cmds.polySelectConstraint( m=3, t ...
- mysql 创建存储过程 创建1000w测试数据表
存储过程:The stored procedure 结构 CREATE [DEFINER = { user | CURRENT_USER }] PROCEDURE stored_procedure_n ...