token是什么,如何获取后台token

12,844 阅读3分钟

一、什么Token?

1、Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。

2、Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。

3、使用Token的目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。

了解了Token的意义后,我们就更明确的知道为什么要用他了。

二、如何使用Token?

这是本文的重点,在这里我就介绍常用的两种方式。

在用设备号/设备mac地址作为Token(推荐)

客户端:客户端在登录的时候获取设备的设备号/mac地址,并将其作为参数传递到服务端。

服务端:服务端接收到该参数后,便用一个变量来接收同时将其作为Token保存在数据库,并将该Token设置到session中,客户端每次请求的时候都要统一拦截,并将客户端传递的token和服务器端session中的token进行对比,如果相同则放行,不同则拒绝。

三、如何获取后台token

token是相对会叫安全的使用暗码形式的数据传输,由后台产生,并且传输到前台,前台可以将保存,在前台每次发送请求的时候可以携带token,后台可以对token进行验证,通过验证的通过请求可以对数据进行正确的回复,否则就睡返回错误的回执码

token有自己的过期时限,并且是在后台实现,前台虚无考虑那么多,具体前台的步骤分为三部

  1. 在登陆的时候后台会给一个token码,前台将其存储在cookie,localstroage或者localsession中即可

    请注意需要在tooken的前边拼接字符串'Bearer '+,固定格式

     login(){
         axios.post('/user/login',this.user).then((res)=>{
             localStorage.setItem('token',"Bearer "+res.data.res.token)
         })
     }
    
  2. 在router中设置守卫导航

判断token是否存在,如果存在将携带token进行下一簇的操作,如果不存在,则返回登陆

    router.beforeEach((to,from,next)=>{
        if(to.matched.some((route)=>route.meta.Auth)){
            if(localStorage.getItem('token')){
                next()
            }else{
              next({
                 path:'/login',
                    query:{
                     returnURL:to.path
                }
                })
            }
           
     }else{
             next()
        }
    })
  1. 在axios的请求拦截器中携带tooken进行请求

     axios.interceptors.request.use(config=>{
         const token=localStorage.getItem('token')
         // if(token){
             token?config.headers.Authorization=token:null;
         // }
         return config
     })
    

每次请求时都会携带token,后台验证不验证token就是后台的问题了

设置token的回复拦截器,对回执码错误的进行操作处理

    axios.interceptors.response.use(res=>{
        if(res.data.res_code=== 401){
            router.replace('/login');
            localStorage.removeItem('token')
        }
        return res
    })