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

【问题标题】：Nuxt Auth Module Authenticated User DataNuxt Auth 模块经过身份验证的用户数据
【发布时间】：2018-09-30 11:30:10
【问题描述】：

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

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

这是服务器登录后的JSON响应。这里的token和上面提到的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
      }
    }
  }
}

附：我意识到我在 URL 中明确包含了access_token。目前，我不知道在 Nuxt Auth 模块中可以在哪里设置 master_key 等。

【问题讨论】：

也许这篇文章对你有帮助medium.com/@anas.mammeri/…

标签： authentication vuex nuxt.js

【解决方案1】：

在你的 store/index.js 中试试这个

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({
  state: {
    authUser: null
  },
  mutations: {
    SET_USER: function (state, user) {
      state.authUser = user
    }
  },
  actions: {
    CHECK_AUTH: function(token, router) {
      if (token === null) {
        router.push('/login')
      }
    }
  }
})
export default store

对于路由器，这应该在全局范围内工作：

$nuxt._router.push('/')

【讨论】：