Question

我有一个API api/auth，用于记录用户。它希望收到access_token（作为网址查询，来自标头或来自请求正文），username和password。我一直在使用Vue Chrome开发者工具，即使我从服务器收到201响应，auth.loggedIn状态仍然是假的。我认为这可能是我redirect上的nuxt.config.js路径也不起作用的原因。谁能指出我为什么不起作用的正确方向？

这是Vue Chrome开发者工具的屏幕截图

这是登录后服务器的JSON响应。此处的令牌与上面提到的access_token不同。

{
    "token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "user": {
        "user_name": "xxxxxxxxxxxxxxxxxx",
        "uid": "xxxxxxxxxxxxxxxxxx",
        "user_data": "XXXXXXXXXXXXXXXXXXXXXXXXX"
    }
}

以下是nuxt.config.js

的相关部分

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    ['bootstrap-vue/nuxt', { css: false }]
  ],
  router: {
    middleware: [ 'auth' ]
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/auth?access_token=XXXXXXXXXXXXXXXXXXXXXX',
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: '/api/auth/logout',
            method: 'post'
          },
          user: {
            url: '/api/users/me',
            method: 'get',
            propertyName: 'user'
          }
        }
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      home: '/home'
    },
    token: {
      name: 'token'
    },
    cookie: {
      name: 'token'
    },
    rewriteRedirects: true
  },
  axios: {
    baseURL: 'http://localhost:9000/'
  }
}

我的store/index.js

export const state = () => ({
  authUser: null
})

export const mutations = {
  SET_USER: function (state, user) {
    state.authUser = user
  }
}

export const actions = {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session && req.user) {
      commit('SET_USER', req.user)
    }
  },

  async login ({ commit }, { username, password }) {
    const auth = {
      username: username,
      password: password
    }

    try {
      const { user } = this.$auth.loginWith('local', { auth })
      commit('SET_USER', user)
    } catch (err) {
      console.error(err)
    }
  }
}

商店中的登录操作由页面中的此方法触发：

export default {
  auth: false,
  methods: {
    async login () {
      try {
        await this.$store.dispatch('login', {
          username: this.form.email,
          password: this.form.password
        })
      } catch (err) {
        this.alert.status = true
        this.alert.type = 'danger'
        this.alert.response = err
      }
    }
  }
}

P.S。我意识到我在网址中明确地包含access_token。目前，我不知道Nuxt Auth Module中可以设置master_key等的位置。

Nuxt Auth模块经过身份验证的用户数据

0 个答案: