vue中如何利用token做权限控制 |
您所在的位置：网站首页 › 路由配置文件解密 › vue中如何利用token做权限控制 |
|
要想彻底理解token，就必须弄清楚以下几个问题：
1.token是什么？ 2.token的作用是什么？ 3.token该怎么用？ 一、token的概念当客户端频繁的向服务端发送请求时，服务端就会相应频繁的向数据库查询用户名和密码然后进行对比，最后返回结果。此时token产生了，在用户第一次登录之后，服务器就会获得一个独一无二的标识返回给客户端，这个标识就是token，当客户端再次发送请求时只需要将token带上，这样服务端就不用一次次向数据库对比用户名和密码。 总的来说：token就是客户端和服务端统一的一个唯一标识。 二、token的作用 一句话：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。 三、token怎么用首先，客户端在登录的时候获取设备的设备号/mac地址，并将其作为参数传递到服务端。其次，服务端接收到该参数后，便用一个变量来接收同时将其作为Token保存在数据库，并将该Token设置到session中，客户端每次请求的时候都要统一拦截，并将客户端传递的token和服务器端session中的token进行对比，如果相同则放行，不同则拒绝。 如何用token做权限控制，这是本文的重中之重，接下来将会分步详细解释具体做法。 1.在路由中加入meta字段，记录也买你是否需要做权限控制首先在router文件夹下的index.js中，这里以购物车页面以及商品详情页为例 { path:'shopCar', name:'shopCar', component:()=>import('../views/shopCar'), // 只要有页面需要权限控制就加meta auth【自定义】值为true，不需要权限控制可以将值设为false meta:{ // 识别是否匹配到购物车组件 做权限控制 auth:true, wyh:'购物车' } }, { path:'detail', name:'detail', component:()=>import('../views/detail'), meta:{ auth:false, wyh:'详情' } }, 2.用路由导航守卫设置路由拦截这里用到全局导航守卫：beforeEach() 在地址变化前，对每次路由地址变化进行拦截 。通常在src下的permission.js文件中处理，代码如下： router.beforeEach((to,from,next)=>{ // 这里可以获取地址变化的信息 console.log(from); // 权限控制 if(to.meta.auth){ // 这里表示能进入组件购物车页面，接下来需要验证是否登录，只有登录才能进入购物车页面 // console.log(hasToken); if(!hasToken || hasToken == 'null'){ // 没有登录，跳转到登录页面 // 如果想再次登录之后直接进入权限页面 next('/index/login?redirect='+to.path) }else{ next(true)// 放行 } }else{ next()//其他页面，非权限页面 } })注意：在路由导航守卫中，不管验证结果如何，next()一定要放行，否则将不会执行接下来的代码 3.设置拦截器，对axios进行二次封装这一系列的操作通常在utils下的request.js文件。 拦截器分为：请求拦截器和响应拦截器，顾名思义，请求拦截器就是在客户端发送请求之前拦截，响应拦截器则是对服务端返回的响应做拦截。 在请求拦截器里处理token，通过请求头传递，发送请求拦截 用途： 1.大部分接口，地址拼接uuid 2.把token放在请求头中 3.每一个接口的请求参数都有签名配置 4.每一个接口数据都有加密处理【一旦涉及到加密，就需要解密】 // 一、请求拦截器 request.interceptors.request.use(res=>{ if(store.getters.token){ // 把token添加到请求头上，头的key值服务器规定 自定义：'Y-YF-F' res.headers['Y-YF-F'] = getToken() } res+uuid; // 必须有返回值，不然请求发不出去 return res },error => { // do something with request error console.log(error) // for debug return Promise.reject(error) })注意：必须有返回值，否则请求将无法发送。 / 二、响应拦截器 // 不只是成功状态有响应，不同的状态响应码不同 request.interceptors.response.use((response)=>{ let {data} = response; if(data.code =='3' || data.code =='2'){ // 响应失败 统一抛出失败信息 return Promise.reject(new Error('error')) } if(data.code =='0'){ // token失效 console.log('登录失败'); } if(data.code == '1'){ router.push('/index/home'); } return response; //如果不返回，下面接收不到响应体中的内容 },error=>{ Message({ message:'访问超时', duration:10000, type:'error' }) return Promise.reject(new Error(error)) }) 4.将token存储在本地中也就是所谓的数据持久化 分析：可以做持久化的方式，作用是什么 cookies http协议同意，为了登录验证存在 【签名、token、用户信息】特点：可以设置过期时间，默认时间；大小：4kblocalStorage：任何数据，没有过期时间，只能程序手动删除；大小：4mbsessionStorage：任何数据，浏览器关闭前清空；大小：2mb方案一 使用插件 vuex-persistedstate vue-cookies js-cookies 注意：有多少人在使用插件，更新维护时间 vuex-persistedstate与 vue-cookies可以结合使用方案二 自己独立封装处理模块 例如：auth.js 注意：无论什么方式，对于用户信息村的一定是加密的内容，在使用时获取解密使用 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |