在vue中使用后台提供的token验证方式总结及使用方法

分手后的思念是犯贱 2023-02-13 11:30 3阅读 0赞

## [在vue中使用后台提供 的token验证方式总结及使用方法][vue_ _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()
        }
       
    })

3.在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
    })

这个根据后台的回执码自行更改就行

[vue_ _token]: https://www.cnblogs.com/mrxinxin/p/10188490.html