前端开发:关于鉴权的使用总结
前言
前端开发过程中,关于鉴权(权限的控制)是非常重要的内容,尤其是前端和后端之间数据传递时候的请求鉴权校验。前端鉴权的本质就是控制前端视图层的显示和前端向后台所发送的请求,但是只有前端鉴权,没有后端鉴权是非常不合理的,前端的鉴权只是起到一个锦上添花的作用,虽然在前后端开发中程序的鉴权核心是在后端,但是前端鉴权也是很有必要的。那么本篇博文就来分享一下前端关于鉴权的使用总结,记录一下,方便查阅使用。
前端鉴权定义
前端鉴权,也叫前端身份认证,指的是验证用户是否具有系统的访问权限。前端鉴权其实就是控制前端视图层的展示和前端所有发送的请求,就像我们去坐飞机的登机牌(对应的标识,在一定的时间范围)。
前端鉴权认证方式
前端鉴权的认证方式常用的主要有四种:cookie-session、Token、OAuth、HTTP Basic Authentication。
1、cookie-session方式
cookie-session方式较老的系统里面比较常见,它只适用于web系统。由于HTTP协议是无状态的,所以要解决共享信息的问题必须要用其他的方式来解决,这就有了会话ID(即session id),服务器为每个用户生成一个不一样的随机字符串(session id),一份存在服务器,一份以cookie的形式写给浏览器。这样,浏览器每次向服务器发起HTTP请求的时候,携带这个session id回传给服务器,服务器就能区分那个是那个了。
2、Token方式
Token是目前市面上主流用的方式,主要适用于app鉴权,微信开发平台access token也是差不多类似的思路。Token 其实是服务器生成的一串随机字符串或者一个 json 串,用于客户端进行资源请求的令牌。当调用登录接口之后,服务端返回给前端一个 Token ,之后存储Token 到本地,每次前端请求接口的时候,都需要在请求头里带上 Token 信息,并且 Token 可以在服务端设置过期时间,如果Token 过期之后,前端在请求失败回调返回code码之后,重新跳转到登录页进行重新鉴权。
3、OAuth方式
OAuth方式是个趋势,现在想要推广应用都先要接入微博、微信、QQ等登录,降低用户使用门槛,特别是微信渠道的应用,都是接入了微信开发授权登录。
4、HTTP Basic Authentication方式
HTTP Basic Authentication方式用的较少,平常FTP登录是用的这种方式,只适用于在企业内网系统。
前端权限的意义
- 减少/降低非法操作的可能性。比如页面上的一个操作按钮,通过控制台来改变它的属性,如果当前用户没有权限控制,虽然点击了,但是不会有操作以后的效果;如果有权限控制的话,没有权限的用户,可以让它隐藏,用户就看不到这个按钮的存在。
- 尽可能排除减少不必要的请求,减轻服务器压力。不具备权限的请求,就应该不需要发送。
- 提高用户体验。
前端鉴权的使用思路
这里分享一下前端鉴权的使用思路,大概分为以下几步:
1、首先制作一个404提示界面,然后在路由最后面添加如下代码:
{path:"*", //如果前面的路由没有匹配到时,所有的错误路由都会跳转到404提示界面component: 404Error}
2、在做下面所有操作的时候,都需要后台返回一个登录的数据,一般在登录页面的登录按钮中触发的点击事件,获取到后台从数据库中读取到的用户信息,从当中找出相应的数据来实现。
3、菜单控制,菜单主要是导航栏的显示,由于登录数据获取是在login界面中,而导航栏显示组件在其他组件中,所以要通过传递数据来拿到登录数据,一般是通过数据本地存储来做,但是要在最后退出登录的时候清楚本地存储的数据。
4、界面的控制,如果用户没有登录,手动在地址栏输入管理界面地址,就需要跳转到登录界面;如果用户登录之后,但是手动输入非权限内的地址,应该跳转到404提示界面或者提示没有权限。
5、使用拦截器判断用户是否登录,判断token是否存在,也就是在登录方法里面做处理。登录的代码如下所示:
login(){this.$refs.loginForm.date(async login=>{if(!login) returnconst {data:res} =await this.$http.post("login",this.loginFrom)if(res.status !=200) return this.$message.error('登录失败')this.$store.commit('setRight',res.right)this.$store.commit('setUser',res.data.user)//将token存储到本地中sessionStroage.setItem('token',res.data.token)this.$router.push('./home')})}
6、登录之后再来判断进行跳转到逻辑,通常是使用导航守卫,由于可以伪造token,router 路由管理下面的代码如下所示:
//在常规路由下面添加一个方法router.beforeEach((to,from,next)=>{if(to.path ==='./login'){next()} //跳转到登录界面不拦截else{//这里是进入其他界面,首先判断有无token没有跳转到登录界面,有的话就执行 const token=sessionStroage.getItem('token')if(!token){next('./login')}else{next()}}})
7、动态路由的使用,由于某些角色没有权限,所以他就不应该有这个路由,更不能地址栏输入。首先把子路由,也就是
权限不够人的路由注释掉,路由组件的代码如下所示:
import store from '@/store'Vue.use(Router)const userRule={path:'./user',component:user} //超级管理员的用户信息界面const adminRule = {path:’./admin’,component:admin} //二级管理员//将路由写成一个对象,只要判断这个对象中有没有其中的二级路由就行了const ruleMapping = {'user': userRule,'admin': adminRule}//应该在前面定义,后面动态添加export function initDynamicRoutes(){//定义一个方法将其导出,根据二级权限,对路由规则进行动态的添加const currentRoutes = router.options.routesconst right = store.state.rightright.forEach(item => {item.children.forEach(item =>//item就是二级权限{ currentRoutes[2].children.push(ruleMapping[item.path])})})router.addRoutes(currentRoutes) //router.addRoutes方法,将修改过后的路由对象重新添加router中}
8、登录界面的逻辑,具体代码如下所示:
import {initDynamicRoutes} from '@/routes'//将方法导入进来login(){//登录成功之后,根据用户所具备的权限动态添加路由规则initDynamicRoutes()}需要在app.vue 当中添加如下代码:import { initDynamicRoutes } from '@/router.js'export default {name: 'app',created() { //最开始就重新加载路由规则initDynamicRoutes()}}
9、请求和响应的控制,如果用户通过非常规操作手动在调试器当中将禁用的按钮变成启用的状态,此时发出的请求应该被拦截。
拓展一:前端带参数传给后端的常用方式
前端带参数传给后端的常用方式有:①查询参数?后面携带的;②路径参数:后面携带的,也就是query的;③请求头携带;④请求体携带。
1、写法:
axios({method:'PUT',//路径参数url:'/product/'+10,//查询参数(axios比较特殊)params:{page:1,num:10,},//请求头headers:{'X-Hahaha':'666',},//请求体data:{name:11,phone:13022445588,},})
2、结果:
完整的url:PUT /product/10?page=1&num=10后端获取到请求头参数:request.headers['x-hahaha']后端获取到请求体参数:request.body.name //1后端获取到查询参数:request.query.page //1后端获取到路径参数:request.params.id //10
拓展二:请求状态码
1、常见请求状态码有:
200 - 请求成功
301 - 资源(网页等)被永久转移到其它URL
304 - 客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
404 - 请求的资源(网页等)不存在
500 - 内部服务器错误
2、状态码区段释义:
1**开头:信息提示。这些状态代码表示临时的响应,客户端在收到常规响应之前,需要准备接收一个或多个 1* * 响应。
2**开头 :请求成功。表示成功处理了请求的状态代码。
3** 开头 :请求被重定向。表示要完成请求,需要进一步操作 ,一般这些状态代码用来重定向的。
4**开头 :请求错误。这些状态代码表示请求可能出错,妨碍了服务器的处理,比如请求链接不正确报错404。
5**开头:服务器错误。这些状态代码表示服务器在尝试处理请求时发生内部错误,一般是服务器本身的错误,而不是请求出错。
最后
通过本文关于鉴权(权限的控制)的方法的介绍,如果认真阅读并且实践示例,应该会很好的掌握这些知识点,尤其是前端和后端之间数据传递时候的请求鉴权校验,但是只有前端鉴权,没有后端鉴权是非常不合理的,前端的鉴权只是起到一个锦上添花的作用,虽然在前后端开发中程序的鉴权核心是在后端,但是前端鉴权也是很有必要的,这是一篇值得阅读的文章,尤其是对于前端鉴权还不是太熟练的开发者来说甚为重要,重要性就不在赘述。欢迎关注,一起交流,共同进步。
前端开发:关于鉴权的使用总结相关推荐
- php用户鉴权,app开发之鉴权 PHP版
当我们在写接口的时候,一定会碰到接口安全相关.一般会有两种情况.不需要用户参与,比如客户端读取新闻列表.用户列表. 需要用户参与,比如修改用户的信息,评论新闻的内容等. 针对1的设计,可以在公共参数上 ...
- js获取session_学习后端鉴权系列: 基于Cookie, Session认证
说起鉴权大家应该都很熟悉, 不过作为前端开发来讲, 鉴权的流程大头都在后端小哥那边, 但是作为一个有志气的开发者肯定要好好学习整个鉴权流程以及方案, 不然怎么跟后端合作. 常见的鉴权方案 基于Cook ...
- jwt token 过期刷新_如何在SpringBoot中集成JWT(JSON Web Token)鉴权
这篇博客主要是简单介绍了一下什么是JWT,以及如何在Spring Boot项目中使用JWT(JSON Web Token). 1.关于JWT 1.1 什么是JWT 老生常谈的开头,我们要用这样一种工具 ...
- 详解比springSecurity和shiro更简单优雅的轻量级Sa-Token框架,比如登录认证,权限认证,单点登录,OAuth2.0,分布式Session会话,微服务网关鉴权
文章目录 1. 技术选型 2. Sa-Token概述 2.1 简单介绍 2.2 登录认证 2.3 权限认证 3. 功能一览 4. Sa-Token使用 4.1 引入Sa-Token依赖 4.2 Sa- ...
- Sa-Token(Java鉴权系统)
哈喽,大家好,我是指北君. 大家有没有发现,现在我们已经习惯了一处登录,处处使用的设计,但是你知道该如何实现吗?又该如何优雅的实现? 前言 不知道在前几年互联网还没有那么发达的时候,大家有没有感触到? ...
- 认证、授权、鉴权、权限控制
目录 0x01 概念 0x02 前端-后端授权/鉴权方案 2.1 Http Basic Authentication 2.2 session-cookie 2.3 token 2.4 JWT(Json ...
- 接口鉴权 - 学习/实践
1.应用场景 为了保证接口调用的安全性,设计实现一个接口调用鉴权功能,只有经过认证之后的系统才能调用我们的接口,没有认证过的系统调用我们的接口会被拒绝. 如: 你正在参与开发一个微服务. 微服务通过 ...
- 3 年后端、4 年前端,聊聊用户认证鉴权
你工作 1-2 年时, 在和后端开发联调接口 API,人家说 token 过期了,通过邮件点击链接我们要做个 JWT 认证,你两眼一抹黑,这是啥子呀. 你工作 3-5 年后,公司要做一套 oauth2 ...
- 钉钉JSAPI前端鉴权
钉钉二次开发分为如下表所示三种类型的开发,只有企业内部应用才需要对JSAPI鉴权. 类型 开发方式 JSAPI鉴权 应用场景 第三方企业应用 E应用开发 不需要 用于发布到钉钉应用市场,供广大用户下载 ...
最新文章
- lightoj 1063 求割点
- 数据中心管理人员预计2018年发生的变化
- python卸载后安装不上_[宜配屋]听图阁
- 页面加载时间如何影响你的收益?
- centos7 开机后进去了命令行_Linux系统管理:开机启动流程(二)
- springboot面试
- centos 7 vs centos6 的不同
- 开源公司黄页之Facebook开源软件推荐(一)
- 演练nerddinner 问题
- UNIX哲学之我的实践【1】
- 逻辑斯蒂回归:家庭买私家车的概率
- 多视角子空间学习系列之 CCA 典型相关分析
- 关于认识五线谱和简谱的基础知识
- TSL1401 CCD传感器驱动
- 微信账号和语音文件的结构分析
- GMAC接口(2)——协议
- 中国帆船拖车市场深度研究分析报告
- java 查看对象内存占用大小
- Java开发实用工具
- 分享8个前端可以制作360度WebVr全景视图框架
热门文章
- hd6305 GPRS 结构体 Server 对齐
- iPhone手机,ibooks为什么突然不能用了?
- network_day1
- OpenShift 4 - 从 1.3G 到 50M,以最小化的可执行程序运行 Quarkus 微服务
- 数据碎片重组恢复之索尼摄像机MTS视频恢复混乱不全无法编辑的解决方法
- 大量精品中医古籍下载
- COMSOL——LiveLink for MATLAB学习3——奶酪模型
- 「前端」webp图片适配流量优化 1
- 一次简单的路由器渗透
- 指甲上长 黑线 ,出问题的可能是: 肾/肝/肠胃/皮肤。需要去医院,看皮肤科和 消化科。