前端开发：关于鉴权的使用总结

前言

前端开发过程中，关于鉴权（权限的控制）是非常重要的内容，尤其是前端和后端之间数据传递时候的请求鉴权校验。前端鉴权的本质就是控制前端视图层的显示和前端向后台所发送的请求，但是只有前端鉴权，没有后端鉴权是非常不合理的，前端的鉴权只是起到一个锦上添花的作用，虽然在前后端开发中程序的鉴权核心是在后端，但是前端鉴权也是很有必要的。那么本篇博文就来分享一下前端关于鉴权的使用总结，记录一下，方便查阅使用。

前端鉴权定义

前端鉴权，也叫前端身份认证，指的是验证用户是否具有系统的访问权限。前端鉴权其实就是控制前端视图层的展示和前端所有发送的请求，就像我们去坐飞机的登机牌（对应的标识，在一定的时间范围）。

前端鉴权认证方式

前端鉴权的认证方式常用的主要有四种：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) return

 const {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.routes

const right = store.state.right

right.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**开头：服务器错误。这些状态代码表示服务器在尝试处理请求时发生内部错误，一般是服务器本身的错误，而不是请求出错。

最后

通过本文关于鉴权（权限的控制）的方法的介绍，如果认真阅读并且实践示例，应该会很好的掌握这些知识点，尤其是前端和后端之间数据传递时候的请求鉴权校验，但是只有前端鉴权，没有后端鉴权是非常不合理的，前端的鉴权只是起到一个锦上添花的作用，虽然在前后端开发中程序的鉴权核心是在后端，但是前端鉴权也是很有必要的，这是一篇值得阅读的文章，尤其是对于前端鉴权还不是太熟练的开发者来说甚为重要，重要性就不在赘述。欢迎关注，一起交流，共同进步。