php前端路由权限,SaaS-前端权限控制
1 前端权限控制
1.1 需求分析
1.1.1 需求说明
基于前后端分离的开发模式中,权限控制分为前端页面可见性权限与后端API接口可访问行权限。前端的权限控制主要围绕在菜单是否可见,以及菜单中按钮是否可见两方面展开的。
1.1.2 实现思路
在vue工程中,菜单可以简单的理解为vue中的路由,只需要根据登录用户的权限信息动态的加载路由列表就可以动态的构造出访问菜单。
登录成功后获取用户信息,包含权限列表(菜单权限,按钮权限)
根据用户菜单权限列表,动态构造路由(根据路由名称和权限标识比较)
页面按钮权限通过自定义方法控制可见性
1.2 服务端代码实现
对系统微服务的FrameController的profile方法(获取用户信息接口)进行修改,添加权限信息
/**
* 获取个人信息
*/
@RequestMapping(value = "/profile", method = RequestMethod.POST)
public Result profile(HttpServletRequest request) throws Exception {
//请求中获取key为Authorization的头信息
String authorization = request.getHeader("Authorization");
if(StringUtils.isEmpty(authorization)) {
throw new CommonException(ResultCode.UNAUTHENTICATED);
}
//前后端约定头信息内容以 Bearer+空格+token 形式组成
String token = authorization.replace("Bearer ", "");
//比较并获取claims
Claims claims = jwtUtil.parseJWT(token);
if(claims == null) {
throw new CommonException(ResultCode.UNAUTHENTICATED);
}
//查询用户
User user = userService.findById(userId);
ProfileResult result = null;
if("user".equals(user.getLevel())) {
result = new ProfileResult(user);
}else {
Map map = new HashMap();
if("coAdmin".equals(user.getLevel())) {
map.put("enVisible","1");
}
List list = permissionService.findAll(map);
result = new ProfileResult(user,list);
}
return new Result(ResultCode.SUCCESS,result);
}
1.3 前端代码实现
1.3.1 路由钩子函数
vue路由提供的钩子函数(beforeEach)主要用来在加载之前拦截导航,让它完成跳转或取消。可以在路由钩子函数中进行校验是否对某个路由具有访问权限
router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar
if (getToken()) {
// determine if there has token
/* has token */
if (to.path === '/login') {
next({path: '/'})
NProgress.done() // if current page is dashboard will not trigger afterEach hook,
so manually handle it
} else {
if (store.getters.roles.length === 0) {
// 判断当前用户是否已拉取完user_info信息
store
.dispatch('GetUserInfo')
.then(res => {
// 拉取user_info
const roles = res.data.data.roles // note: roles must be a array! such as:
['editor','develop']
store.dispatch('GenerateRoutes', {roles}).then(() => {
// 根据roles权限生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({...to, replace: true}) // hack方法 确保addRoutes已完成 ,set the
replace: true so the navigation will not leave a history record
})
})
.catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('验证失败, 请重新登录')
next({path: '/login'})
})
})
} else {
next()
}
}
} else {
/* has no token */
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单,直接进入
next()
} else {
next('/login') // 否则全部重定向到登录页
NProgress.done() // if current page is login will not trigger afterEach hook, so
manually handle it
}
}
})
1.3.2 配置菜单权限
在 \src\module-dashboard\store\permission.js 下进行修改,开启路由配置
actions: {
GenerateRoutes({ commit }, data) {
return new Promise(resolve => {
const { roles } = data
//动态构造权限列表
let accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
commit('SET_ROUTERS', accessedRouters)
//commit('SET_ROUTERS', asyncRouterMap) // 调试开启全部路由
resolve()
})
}
}
1.3.3 配置验证权限的方法
找到 \src\utils\permission.js 配置验证是否具有权限的验证方法
import store from '@/store'
// 检查是否有权限
export function hasPermission(roles, route) {
if (roles.menus && route.name) {
return roles.menus.some(role => {
return route.name.toLowerCase() === role.toLowerCase()
})
} else {
return false
}
}
// 检查是否有权限点
export function hasPermissionPoint(point) {
let points = store.getters.roles.points
if (points) {
return points.some(it => it.toLowerCase() === point.toLowerCase())
} else {
return false
}
}
1.3.4 修改登录和获取信息的请求接口
(1)关闭模拟测试接口
\mock\index.js 中不加载登录(login)以及(profile)的模拟测试
import Mock from 'mockjs'
import TableAPI from './table'
import ProfileAPI from './profile'
import LoginAPI from './login'
Mock.setup({
//timeout: '1000'
})
Mock.mock(/\/table\/list\.*/, 'get', TableAPI.list)
//Mock.mock(/\/frame\/profile/, 'post', ProfileAPI.profile)
//Mock.mock(/\/frame\/login/, 'post', LoginAPI.login)
1.4 权限测试
(1) 菜单测试
分配好权限之后,重新登录前端页面,左侧菜单已经发生了变化。
(2)对需要进行权限控制的(权限点)验证测试
页面添加校验方法
methods: {
checkPoint(point){
return hasPermissionPoint(point);
}
}
使用v-if验证权限是否存在,其中参数为配置的权限点标识
新增员工
本文同步分享在 博客“cwl_java”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。
php前端路由权限,SaaS-前端权限控制相关推荐
- 前端路由以及浏览器回退,hash history location
一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...
- javascript基础修炼——前端路由的基本原理
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果. [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十 ...
- Vue学习笔记(四)—— 前端路由
介绍 本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
- Vue前端路由~满满的干货
文章目录 目标 目录 路由的基本概念与原理 路由 后端路由 SPA(Single Page Application) 前端路由 实现简易前端路由 Vue Router vue-router的基本使用 ...
- Vue前端路由~非常详细哦,不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录 目标 目录 路由的基本概念与原理 路由 后端路由 SPA(Single Page Application) 前端路由 实现简易前 ...
- 单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录 单页面应用(SPA) 前端路由的由来 前端路由 hash 模式 history 模式 hash.history优缺点 单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
- 前端路由工作原理与使用
单页应用和多页应用 单页面应用:所有功能在一个页面上实现 一个.html 文件 前端路由 组件化开发 网易云音乐 小米移动端 多页应用:与单页应用相对应的,不同的功能通过不同的页面来实现 单页面 - ...
- Vue学习之前端路由
前端路由 什么是前端路由 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的 什么时候使 ...
- 什么是`前端路由`?什么时候使用`前端路由`?`前端路由`存在哪些优缺点?
一.前言 之前我们前后端开发采用前后端分离的方法,现在的前后端开发我们采用SPA来开发,也就是单页面开发应用. 我们在采用前后端分离的方法进行开发时,我们请求一个url地址,此时后台返回给我们一个页面 ...
- 单页面应用的前端路由原理是什么?
前置知识 在了解单页面应用的前端路由原理之前,我们先了解下什么事单页面应用,什么是多页面应用,他们之间的区别又是什么? 什么是单页面应用? 单页面应用指的是第一次进入页面的时候会请求一个html文件, ...
最新文章
- CMAKE设置INSTALL工程,分别设置头文件、Lib和DLL的输出路径
- 148. Leetcode 455. 分发饼干 (贪心算法-基础题目)
- [BUUCTF]pwn - wustctf2020_easyfast (Use After Free)
- Intellij IDEA关闭 Build窗口提示
- python虚拟机 基于寄存器_虚拟机随谈(一):解释器,树遍历解释器,基于栈与基于寄存器,大杂烩...
- 西南科技大学计算机专业宿舍条件怎么样,西南科技大学宿舍条件,宿舍环境图片(10篇)...
- 强化学习组队学习task02——马尔可夫决策过程及表格型方法
- 分布式文件系统HDFS体系
- TED如何掌控你的时间(第二天)
- ThinkPHP框架学习(一)
- HDX RealTime 避免回音
- GB28181的协议详解
- 男人必看十大电影 VS 女人必看十大电影
- 利用python实现华氏温度和摄氏温度的转换
- 面试官问:你在项目中做过哪些安全防范措施?
- Windows 10 LTSC官方版本下载地址
- phython在file同时写入两个_RTX 3080出生两个月卒!Radeon RX 6800/6800 XT首发评测
- java内部窗口无法实现,java 既不是内部命令也不是外部命令的解决办法
- tplink android管理软件,tplink手机app下载
- 基于stm32的汽车智能充电桩设计/单片机/毕业设计/课程设计
热门文章
- “405 – 不允许用于访问此页的 HTTP 谓词。”的解决方案
- Sturts2中action各项配置的默认值
- excel原来是门编程语言-使用公式拼接字符串
- 使用ssh远程连接时的一些注意问题
- node deno_Deno手册:带有代码示例的TypeScript运行时教程
- react和nodejs_如何使用React,TypeScript,NodeJS和MongoDB构建Todo应用
- win10电子邮件没有关联_我们如何为在线课程建立10K电子邮件列表
- 简单api_GraphQL API集成的简要介绍
- vue设置textarea最大字数_【Vue 学习】 Vue常用系统指令
- mysql 本地登录失败 - 已授权