axios拦截问题

Question

黄老湿，最近在搞一个博客项目，想使用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()
    }

请黄老师帮看看

Answer 1

ustbhuangyi 2020-06-25 23:39:18

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

• 提问者 我要学习去了 #1

  搞错了，之前对Json.prase没仔细看，我在研究研究

• 提问者 我要学习去了 #2

  黄老师，想问一下axios请求拦截器可以针对某一个请求进行拦截吗？然后在响应拦截器那里进行响应

• ustbhuangyi 回复 提问者 我要学习去了 #3

  你可以在拦截器里根据请求的 url 做不同处理即可。

点开查看后面1条评论