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、用户信息】
• 特点：可以设置过期时间，默认时间；大小：4kb
• localStorage：任何数据，没有过期时间，只能程序手动删除；大小：4mb
• sessionStorage：任何数据，浏览器关闭前清空；大小：2mb

方案一
使用插件 vuex-persistedstate vue-cookies js-cookies
注意：有多少人在使用插件，更新维护时间

• vuex-persistedstate与 vue-cookies可以结合使用

方案二
自己独立封装处理模块 例如：auth.js

注意：无论什么方式，对于用户信息村的一定是加密的内容，在使用时获取解密使用