axios拦截问题

来源:12-16 插件

我要学习去了

2020-06-25

黄老湿,最近在搞一个博客项目,想使用axios的请求拦截和响应功能,结果遇到了两个小问题

  1. 我想用axios给博客管理后台页面做一个拦截功能,判断用户是否登录,如果没有登录全部跳转到登录页面,判断依据是sessionid是否存在,但是不知道为什么,我写的这些代码把我那个/login的请求也拦截了,导致了post /login这个axios请求拿不到返回的data数据,无法进入管理页面
    2.我这个拦截能拦截到/login/status这个请求,数据也能返回,但是返回的data数据居然是个字符串,不是数组,我后台返回 get /login/status请求的数据,是这样写的
module.exports = async (req, res) => {
	if (req.session && req.session.userInfo && req.session.userInfo.role == 'admin') {
		const s = `var isLogin = true; var userId=\"${req.session.userInfo._id}\"`
		res.send(s)
	}else {
		res.send('var isLogin = false')
	}
};

axios拦截是这样写的

axios.interceptors.request.use(
  config => {
    config.url = '/login/status'
    config.method = 'get'
    return config
  },
  err => {
    return Promise.reject(err.response)
  }
)
axios.interceptors.response.use(response => {

  var result = response.data
  console.log(result) // var isLogin = true; var userId="5eef67dd50c6a36924eab781"
  if (!result.isLogin) {
    this.$router.push({ path: '/login' })
  }
})

我登录进入后台管理页面的请求,没做拦截之前,响应都是正常的,代码如下,使用的是element ui的from组件

login(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        try {
          const { data } = await this.$http.post('/login', this.loginForm)
          if (data.role === 'admin') {
            this.$router.push({ name: 'home' })
          } else {
            this.$router.push({ path: '/' })
          }
        } catch (error) {
          return this.$message.error(error.response.data.message)
        }
      })
    },
    /* 重置表单 */
    resetLoginForm(formName) {
      this.$refs[formName].resetFields()
    }

请黄老师帮看看

写回答

1回答

ustbhuangyi

2020-06-25

你的路由接口里返回的不就是一个字符串吗?另外在拦截器中你也是可以拿到请求的相关数据和配置信息的,你可以根据一些判断条件做不同的处理。

0
4
我要学习去了
回复
ustbhuangyi
谢谢。。。
2020-06-27
共4条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程