第一步:导入axios
第二步:create 创建新的axios实例
axios实例注意:这里的 service 的名字是可以随便命名的,但是最好要语义化,下面进行的两个拦截器都要使用到这个变量名。
第三步:请求拦截器
请求拦截器主要完成token的统一注入
request第四步:响应拦截器 (因为用到了vuex的函数,所以要引入store)
响应拦截器主要处理返回的数据异常和数据结构问题
response这里的代码主要是对响应的结果进行了判断,从而进一步处理相应的结果
判断某个操作是否成功,需要根据后端接口返回值中某个特殊字段(一般是由后端来约定)来判断,而不能只是依靠axios内置的报错机制
①此项目中响应结果中的data有success这一项,通过判断success是否为true来决定要不要报错,或者报什么结果
因在发送登录请求时,只能判断请求是否成功,然而不管获取到的是登陆成功还是密码或用户信息错误都算是请求发送成功后返回的结果,从而不能判断出根本的错误请求,都会返回登陆成功。
②在error中的代码,是为了处理token失效问题,当用户重新登录之后可以继续访问退出时的页面
错误的响应中10002为token失效的状态码,由于这是人资项目,因为个人信息比较注重安全隐私,所以不需要考虑续签问题,直接让用户跳到登录页重新登陆即可,这里是直接调用了vuex中的退出登录的函数(分模块了就要在调用模块中函数之前加上模块的名字才可以使用,这里是user模块),具体操作是清空用户信息以及移除token(mutations中封装了removeToken函数)
在用户重新登录时,想要继续访问被强制退出时访问的页面,这时就要通过这个响应拦截器将退出时的哈希地址传出去,具体就是通过让用户跳到携带有与之前访问页面一样的哈希地址信息页面,当然哈希地址(需要进行转码)之前是登录页面的路由地址
‘login?return_url=’+encodeURIComponent(router.currentRoute.fullPath)
网友评论