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构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...
随机推荐
- MongoDB数据库(一):基本操作
1.NoSQL的概念 "NoSQL"一词最早于1998年被用于一个轻量级的关系数据库的名字 随着web2.0的快速发展,NoSQL概念在2009年被提了出来 NoSQL最常见的解释 ...
- python3解决 json.dumps中文乱码
使用json.dumps()运行结果如下 role_name字段中文乱码了 只需要使用ensure_ascii=False 运行结果如下:
- 论文阅读笔记五十:CornerNet: Detecting Objects as Paired Keypoints(ECCV2018)
论文原址:https://arxiv.org/pdf/1808.01244.pdf github:https://github.com/princeton-vl/CornerNet 摘要 本文提出了目 ...
- Redis实战 - 2.list、set和Sorted Set
List Redis的List是通过Linked List(链表)来实现的String集合,所以插入数据的速度很快. 但是缺点就是在数据量比较大的时候,访问某个数据的时间可能会很长,但针对这种情况,可 ...
- 自己动手写Redis客户端- Redis协议(1)
网络层 客户端和服务器通过 TCP 连接来进行数据交互, 服务器默认的端口号为 6379 . 客户端和服务器发送的命令或数据一律以 \r\n (CRLF)结尾. 请求 Redis 服务器接受命令以及命 ...
- Python 官方文档解读(1):66 个内置函数
Python 解释器 (CPython 3.7)内置有 66 个函数,这些函数在任何时刻都是可用的.此文是为了对这 66 个函数进行简单的梳理,便于以后可能用到它们时能想到. 1. abs(x) 返回 ...
- c++ 开源库介绍和安装
1 BLAS库 BLAS(Basic Linear Algebra Subprograms)是一组线性代数计算中通用的基本运算操作函数集合.BLAS Technical (BLAST) Forum负责 ...
- python第六天(元组、字典、集合)
一.元组(tuple) 作用:存多个值,对比列表来说,元组不可变(是可以当做字典的key的),主要用来读 定义:与列表类型相比,只不过把[ ]换成() age=(11,22,33,44,55)prin ...
- selenium使用遇到的问题(selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH.)
1.安装pip3 install selenium 2.使用browser=webdriver.Chrome()时报错 :selenium.common.exceptions.WebDriverExc ...
- windows许可证即将过期
win+R 输入 slmgr.vbs -xpr 查看日期 激活工具地址: 链接: https://pan.baidu.com/s/1S5nealQM1bytPYV6CYbgyg 提取码: sbmu 1 ...