SpringCloud中gateway对用户身份拦截,Vue axios统一处理状态码出现跨域问题

前言

在项目中,我们很多时候都需要对用户身份进行判断,在用户身份无法被验证时,我们返回{status:401,msg:‘XXX’}等,如若能在axios处统一拦截处理,会方便许多;同样,如果在后台gateway处,也能提前对token进行统一验证,避免异常用户的异常访问。

正文

首先在Vue封装的axios工具类中,统一对axios进行拦截操作

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
   
  if (response.data.status === 401) {
   
    Router.push('/login')
  }
  return response
}, function (error) {
   
  return Promise.reject(error)
})

此时,如若后退返回数据的status为401,直接跳转至登录页面。

接着,在后台Ga

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用axios调用多个接口跨域问题可以通过设置代理来解决。 1. 首先,在Vue项目根目录下找到config文件夹的index.js文件。 2. 打开index.js文件,找到dev对象的proxyTable选项。该选项允许我们配置代理。 3. 在proxyTable选项添加以下代码: ```javascript proxyTable: { '/api1': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api1': '/api1' } }, '/api2': { target: 'http://localhost:8001', changeOrigin: true, pathRewrite: { '^/api2': '/api2' } } } ``` 此处使用了两个接口作为示例,一个是/api1,另一个是/api2。target参数指定了代理的目标地址,需要根据实际情况进行修改。changeOrigin参数用于配置是否跨域,默认为false,需要设置为true。pathRewrite参数用于重写请求路径,可以根据需要进行修改。 4. 保存并关闭index.js文件。 5. 在Vue组件使用axios调用接口时,只需要将接口的路径改为对应的代理路径,例如: ```javascript axios.get('/api1/users') .then(response => { // 处理接口1的响应 }) .catch(error => { // 处理接口1的错误 }); axios.get('/api2/posts') .then(response => { // 处理接口2的响应 }) .catch(error => { // 处理接口2的错误 }); ``` 以上代码,/api1和/api2就是代理路径,可以直接在axios使用。 通过以上步骤,我们成功地解决了在Vue使用axios调用多个接口跨域问题。注意,在开发环境下使用代理是安全的,但在生产环境要将代理改为实际的服务器地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值