前后端分离后权限的思路

最近看到许多关于权限的思路,但好像都是使用动态加载路由的方式,现在也分享下我在项目中使用的解决方案。

前后端分离关于权限的处理每个人都不一样,根据项目选择制定合适的方案就好

我的方案是:

  • 前端挂载所有路由
  • 通过 Api 接口获取用户权限标识(路由名称)
  • 在路由切换的时候进行权限校验
  • 至于页面的权限按钮则通过指令+自定义组件的形式封装成通用权限按钮,通过传入相应的标识判断是否现实按钮
  • 大体流程如下图所示

前后端分离权限的实现

  1. 路由中定义是否需要验证权限: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项目实践-前后端分离关于权限的思路的更多相关文章

  1. Springboot + Vue + shiro 实现前后端分离、权限控制

    本文总结自实习中对项目对重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

  2. Spring Boot + Vue + Shiro 实现前后端分离、权限控制

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

  3. centos7 部署vue项目(前后端分离、nginx)

    一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...

  4. 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& ...

  5. Vue+Spring Boot 前后端分离的商城项目开源啦!

    新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...

  6. springBoot 搭建web项目(前后端分离,附项目源代码地址)

    springBoot 搭建web项目(前后端分离,附项目源代码地址)   概述 该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...

  7. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

  8. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  9. vue+node+mongodb前后端分离博客系统

    感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...

随机推荐

  1. web.xml 简记

    web.xml (tomcat启动时读取的配置文件) 首页配置 <welcome-file-list>:index.jsp servlet配置(<servlet>和<se ...

  2. rsync问题

    问题一: rsync: chgrp "/data/www/vhosts/go/.rest.qXYFW5" (in apache) failed: Operation not per ...

  3. So, How About UMD模块-Universal Module Definition

    在ES6模块解决方案出现之前,工具库或包常用三种解决方案提供对外使用的接口,最早是直接暴露给全局变量,比如我们熟知的Jquery暴露的全局变量是$,Lodash对外暴露的全局变量是_,后来出现了AMD ...

  4. 函数式编程-compose与pipe

    函数式编程中有一种模式是通过组合多个函数的功能来实现一个组合函数.一般支持函数式编程的工具库都实现了这种模式,这种模式一般被称作compose与pipe.以函数式著称的Ramda工具库为例. cons ...

  5. line-gradient 之渐变角度

    MDN上对于linear-gradient的定义如下: CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片.其结果属于<gradient>数据类型 ...

  6. [NOI2018]你的名字

    题解: 前68分非常简单 建立SAM 另一个串在上面跑,然后求一个树链的并 我们会发现暴力就是min(l^2,n)的 所以复杂度最多是nsqrt(n)的 当然我们也可以nlogn维护 把所有点按照df ...

  7. 部署Mvc Core SSL网站到Centos并用Nginx作为反向代理

    1. 先在本地比如~/Downloads下建立MVC项目 2. 生成mvc使用的ssl证书
 2.1. 生成.key文件
 openssl genrsa -des3 -out server.key 2 ...

  8. SpringBoot中对于异常处理的提供的五种处理方式

    1.自定义错误页面 SpringBoot 默认的处理异常机制:SpringBoot默认的已经提供了一套处理异常的机制.一旦程序中出现了异常,SpringBoot会向/error的url发送请求.在Sp ...

  9. 多标签caffe重新编译

    说明: Caffe自带的图像转LMDB接口只支持单label,对于多label的任务,可以使用HDF5的格式,也可以通过修改caffe代码来实现.本篇文章介绍怎么通过修改DataLayer来实现带Mu ...

  10. ARP欺骗配置及演示过程

    目录 环境 软件 网络拓扑图 配置流程 配置构思 具体流程 问题 演示过程 状态 检查Attack前centOS7_1的ARP地址表 在kali上输入以下命令发动攻击 此时查看centOS7_1的AR ...