Vue处理token以及请求拦截和响应拦截,全局守卫

token一种身份的验证,在大多数网站中,登录的时候都会携带token,去访问其他页面,token就想当于一种令牌。可以判断用户是否登录状态。本次页面是通过Element-ui搭建的登录界面

Vue处理token以及请求拦截和响应拦截,全局守卫

当用户登录的时候,向后端发起请求的时候,后端会返回给我一个token,前端可以进行校验,进行处理token

Vue处理token以及请求拦截和响应拦截,全局守卫

当前端拿到后端返回的token,可以通过localStorage存储到本地,然后通过jwt-decode对token进行解析,jwt-decode是一种对token的解析包,通过npm install jwt-decode

Vue处理token以及请求拦截和响应拦截,全局守卫

设置好存储方式后,当用户再次登录的时候,在浏览器段可以看点用户存储的token。

Vue处理token以及请求拦截和响应拦截,全局守卫

当页面很多地方需要用到token的时候,用户必须携带token才能访问其他页面,可以通过请求拦截响应拦截设置,并且在响应拦截的时候处理token是否过时,过期时间是通过后端设置的,前端需要判断token的状态码是否过时就行

import axios from 'axios' import { Loading ,Message} from 'element-ui' //引入了element-ui框架库 import router from './router/index.js' let loading; function startLoading() { loading =Loading.service({ lock: true, text: '加载中...', background: 'rgba(0, 0, 0, 0.7)' }); } function endLoading() { loading.close() } // 请求拦截 axios.interceptors.request.use(config => { startLoading() //设置请求头 if(localStorage.eleToken) { config.headers.Authorization = localStorage.eleToken } return config }, error => { return Promise.reject(error) }) // 响应拦截 axios.interceptors.response.use(response => { endLoading() return response }, error => { Message.error(error.response.data) endLoading(); //获取状态码 const {status} = error.response; if(status === 401) { Message.error("token失效,请重新登录"); //清除token localStorage.removeItem('eleToken'); //重新登录 router.push('/login') } return Promise.reject(error) }) export default axios;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzjjp.html