在实际开发中前端登录成功我们将服务器返回的Token保存到Cookie中,为后续与服务器交互做验证!但有时后端没有做相关的逻辑编写无法从Cookie中取到Token,这时前端就需要在request请求拦截中!!!
首先先我们需要在登录接口成功后将返回的Token保存在localStorage、sessionStorage中我这边是保存在localStorage。同时我我在Cookie进行了Token保存!请看代码
handleLogin() { this.$refs.loginFormRef.validate(async valid => { // console.log(valid); if (!valid) return const res = await api.login(this.form) if (res.code === '0000') { window.localStorage.setItem('userName', this.form.username) window.localStorage.setItem('access_token', res.data.access_token) document.cookie = 'access_token=' + res.data.access_token setTimeout(() => { this.$router.push({ path: `/view/Home` }) }, 500) } else { return this.$message.error(res.msg) } }) } validate为el-form表单验证 完成第一步我们就要在request请求拦截中为请求头添加Token //请求拦截 api.interceptors.request.use( req => { // 在发送请求前要做的事儿 req.headers.access_token = localStorage.getItem('access_token') return req }, err => { // 在请求错误时要做的事儿 // 该返回的数据则是axios.catch(err)中接收的数据 return Promise.reject(err) } ) api 是我创建的axios实例,可替换