前端发送token后端redis检验 前端处理token

vue中前端处理token过期的方法与axios请求拦截处理Axios如何实现数据请求、前后端通信——（具体代码是如何实现的）axios的封装这个讲的很清晰

• 1、vue router路由拦截 路由导航守卫（router.beforeEach）
• 2、axios请求拦截器

• ① 请求拦截器
• ② 响应拦截器

• 3、axios的封装

• ① axios的特点
• ② 为什么要对axios进行封装
• ③ 如何封装

1、路由导航守卫——对每次路由地址变化进行拦截，根据所在的页面和要去的页面（登录页和其他页面）判断要不要放行
2、axios拦截器（请求拦截器、响应拦截器）

1、vue router路由拦截 路由导航守卫（router.beforeEach）

• vue-router中也有权限管理（路由导航守卫router.beforeEach）——用户没有登陆（没有token），直接根据URL访问的时候，就应该跳转到登录界面

2、axios请求拦截器

① 请求拦截器

• 首先请求数据之后，服务器返回token，使用axios的请求拦截器，要把token保存在请求头的某一个字段中——这样服务器查看这个请求的时候在请求头中就会看到token

② 响应拦截器

/ 二、响应拦截器
// 不只是成功状态有响应，不同的状态响应码不同
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))
})

3、axios的封装

axios请求封装

① axios的特点

② 为什么要对axios进行封装

• 我的理解：把axios的功能都定义到一个文件里面，然后一个api.js的文件定义这些接口，到时候就可以直接哪个页面需要啥就去用这个接口就好
• 如果比如一个get请求，用户是会员时要多一个参数，如果不封装的话，每一个对应页面的get请求都要去进入相应的页面去改，但是用了封装，只需要去改接口文件，就可以实现所有的get请求方式的更新了

③ 如何封装

axios请求封装