Nuxt 인증 모듈 인증 사용자 데이터

Nuxt 인증 모듈 인증 사용자 데이터

API를 가지고 있습니다.api/auth사용자 로그인에 사용됩니다.수신이 기대됩니다.access_token(URL 쿼리, 헤더 또는 요청 본문)username, 및 apasswordVue Chrome Developer Tool을 사용하고 있는데도201서버로부터의 응답,auth.loggedIn상태는 아직 false입니다.그래서인지도 몰라요redirect위의 패스nuxt.config.js역시 작동하지 않습니다.왜 작동하지 않는지 누가 올바른 방향으로 안내해 줄 수 있나요?

이것은 Vue Chrome Developer Tool의 스크린샷입니다.

로그인 후 서버의 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이 URL에 있습니다.현재로선,master_key등은 Nuxt Auth Module에서 설정할 수 있습니다.

당신의 스토어/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('/')

언급URL : https://stackoverflow.com/questions/49929922/nuxt-auth-module-authenticated-user-data