要想彻底理解token，就必须弄清楚以下几个问题：
1.token是什么？
2.token的作用是什么？
3.token该怎么用？
一、token的概念
当客户端频繁的向服务端发送请求时，服务端就会相应频繁的向数据库查询用户名和密码然后进行对比，最后返回结果。此时token产生了，在用户第一次登录之后，服务器就会获得一个独一无二的标识返回给客户端，这个标识就是token，当客户端再次发送请求时只需要将token带上，这样服务端就不用一次次向数据库对比用户名和密码。
总的来说：token就是客户端和服务端统一的一个唯一标识。 二、token的作用 一句话：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。 三、token怎么用
首先，客户端在登录的时候获取设备的设备号/mac地址，并将其作为参数传递到服务端。其次token 权限管理·(中国)官方网站，服务端接收到该参数后，便用一个变量来接收同时将其作为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()//其他页面，非权限页面
}
})
注意：在路由导航守卫中，不管验证结果如何，next()一定要放行，否则将不会执行接下来的代码
3.设置拦截器，对axios进行二次封装
这一系列的操作通常在utils下的.js文件。
拦截器分为：请求拦截器和响应拦截器，顾名思义，请求拦截器就是在客户端发送请求之前拦截，响应拦截器则是对服务端返回的响应做拦截。
在请求拦截器里处理tokenimToken钱包下载，通过请求头传递，发送请求拦截
用途：
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
注意：无论什么方式，对于用户信息村的一定是加密的内容，在使用时获取解密使用
