Vue-auth websanova

Question

我正在尝试使用websanova在我的客户机中集成JWT身份验证。

我的问题是，在每个http请求上，库都在设置响应主体的令牌。这是我的app.js配置

Vue.use(VueAxios, axios)
Vue.use(VueAuth, {
  auth: {
    request: function (req, token) {
      req.headers['Authorization'] = 'JWT ' + token;
    },
    response: function (res) {
      return res.data
    }
  },
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: { url: 'http://localhost:5005/api/authenticate', fetchUser: false },
  fetchData: { enabled: false },
  refreshData: { enabled: false },
  authRedirect: { path: '/' }
})

我像这样处理登录

login () {
this.$store.dispatch("login");
var redirect = this.$auth.redirect();
  this.$auth.login({
  headers: {
    'Content-Type': 'application/json'
  },
data: this.data.body,
rememberMe: this.data.rememberMe,
redirect: { name: redirect ? redirect.from.name : 'Home' },
fetchUser: false,
success (res) {
  this.$store.dispatch("login_success");
},
err (err) { ...

登录时会很好地接收令牌，但是当我想显示某个表时，令牌会被表源覆盖。

本地存储之前和之后：

​

Answer 1

问题在于您的app.js配置在auth-> 响应函数中。

问题

Vue.use(VueAxios, axios)
Vue.use(VueAuth, {
  auth: {
    request: function (req, token) {
      req.headers['Authorization'] = 'JWT ' + token;
    },
    response: function (res) {
      return res.data   //HERE IS THE PROBLEM (You need to check the token and return it only when it is valid token)
    }
  },
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: { url: 'http://localhost:5005/api/authenticate', fetchUser: false },
  fetchData: { enabled: false },
  refreshData: { enabled: false },
  authRedirect: { path: '/' }
})

解决方案

要解决这个问题，您应该检查令牌值res.data，然后只有当它是有效令牌时才返回它。例如，如果服务器在成功身份验证后返回的数据看起来类似于{'token'：‘123 auth’}，那么您的auth-> 响应函数应该如下所示

Vue.use(VueAxios, axios)
Vue.use(VueAuth, {
  auth: {
    request: function (req, token) {
      req.headers['Authorization'] = 'JWT ' + token;
    },
    response: function (res) {

      //TEST IF DATA CONTAINS VALID AND RETURN IT. 
      if(res.data.token)
         return res.data.token  

      //DON'T RETURN ANY VALUE IF THERE IS NO VALID TOKEN
    }
  },
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: { url: 'http://localhost:5005/api/authenticate', fetchUser: false },
  fetchData: { enabled: false },
  refreshData: { enabled: false },
  authRedirect: { path: '/' }
})

有关更多信息，请访问以下页面：Vue-Auth自定义的auth司机