vue中如何利用token做权限控制

admin 2024-02-09 726次阅读

要想彻底理解token,就必须弄清楚以下几个问题:

1.token是什么?

tokensoft官网

2.token的作用是什么?

token平台

3.token该怎么用?

一、token的概念

当客户端频繁的向服务端发送请求时,服务端就会相应频繁的向数据库查询用户名和密码然后进行对比,最后返回结果。此时token产生了,在用户第一次登录之后,服务器就会获得一个独一无二的标识返回给客户端,这个标识就是token,当客户端再次发送请求时只需要将token带上,这样服务端就不用一次次向数据库对比用户名和密码。

总的来说:token就是客户端和服务端统一的一个唯一标识。 二、token的作用 一句话:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。 三、token怎么用

首先token 权限管理·(中国)官方网站,客户端在登录的时候获取设备的设备号/mac地址,并将其作为参数传递到服务端。其次,服务端接收到该参数后,便用一个变量来接收同时将其作为Token保存在数据库,并将该Token设置到中,客户端每次请求的时候都要统一拦截,并将客户端传递的token和服务器端中的token进行对比,如果相同则放行,不同则拒绝。

如何用token做权限控制,这是本文的重中之重,接下来将会分步详细解释具体做法。

1.在路由中加入meta字段,记录也买你是否需要做权限控制

首先在文件夹下的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.用路由导航守卫设置路由拦截

这里用到全局导航守卫:() 在地址变化前,对每次路由地址变化进行拦截 。通常在src下的.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()//其他页面,非权限页面
    } 
})

注意:在路由导航守卫中,不管验证结果如何imToken下载,next()一定要放行,否则将不会执行接下来的代码

3.设置拦截器,对axios进行二次封装

这一系列的操作通常在utils下的.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存储在本地中

也就是所谓的数据持久化

分析:可以做持久化的方式,作用是什么

方案一

使用插件 vuex- vue- js-

注意:有多少人在使用插件,更新维护时间

方案二

自己独立封装处理模块 例如:auth.js

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



发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。