Блог

Я пытаюсь получить данные при рендеринге шаблона после аутентификации, но запрос возвращает 401 (неавторизованный)… когда я обновляю страницу, данные загружаются…

При входе в систему: ПОЛУЧИТЬ http://localhost:0666/core/user / 401 (Несанкционированный)

При обновлении страницы:

Login.vue Есть форма для отправки пользователя и пароля…

 <script>
import { mapActions } from 'vuex'

export default {
  data: () => ({
    form: {
      username: '',
      password: ''
    }
  }),
  components: {},
  methods: {
    ...mapActions('auth', ['ActionDoLogin']),
    async submit () {
      try {
        await this.ActionDoLogin(this.form)
        this.$router.push({ name: 'Dashboard' })
      } catch (err) {
        alert(err.data ? err.data.message : 'Não foi possivel fazer login')
      }
    }
  }
}
</script>
  

Dashboard.vue:

 <template>
   <div class="dashboard">
     <a class="nav-link" style="color: #6cbde1;">Hello {{user.first_name}}, your account will expire 
      in 0 days</a>
   </div>
</template>

<script>
import LoadSession from '../../services/loadSession'

export default {
  name: 'Dashboard',
  components: {},
  mounted () {
    LoadSession.get().then(resp => {
      this.user = resp.data
    })
  },
  data () {
    return {
      user: { first_name: '' }
    }
  },
  methods: {}
}
</script>
  

actions.js

 import services from '@/http'
import * as storage from '../storage'
import * as types from './mutation-types'

export const ActionDoLogin = async ({ dispatch }, payload) => {
  await services.auth.login(payload).then(res => {
    dispatch('ActionSetToken', res.data.token)
  })
  return await services.auth.loadSession().then(res => {
    dispatch('ActionSetUser', res.data.body)
  })
}

export const ActionCheckToken = ({ dispatch, state }) => {
  if (state.token) {
    return Promise.resolve(state.token)
  }

  const token = storage.getLocalToken()

  if (!token) {
    return Promise.reject(new Error('token Inválido'))
  }
  dispatch('ActionSetToken', token)
  return dispatch('ActionLoadSession')
}

export const ActionLoadSession = async ({ dispatch }) => {
  try {
    const user = await services.auth.loadSession()
    dispatch('ActionSetUser', user)
  } catch (err) {
    dispatch('ActionSignOut')
  }
}

export const ActionSetUser = ({ commit }, payload) => {
  commit(types.SET_USER, payload)
}

export const ActionSetToken = ({ commit }, payload) => {
  storage.setLocalToken(payload)
  storage.setHeaderToken(payload)
  commit(types.SET_TOKEN, payload)
}

export const ActionSignOut = ({ dispatch }) => {
  storage.setHeaderToken('')
  storage.deleteLocalToken()
  dispatch('ActionSetUser', {})
  dispatch('ActionSetToken', '')
}
  

services.js

 export default {
  login: { method: 'post', url: 'api-token-auth/' },
  loadSession: { method: 'get', url: 'core/user/' }
}
  

Что может быть причиной этого? Помогите мне…

Это не решение, но «решаемая» моя проблема.

В Login.vue я отправляю параметр p: true

 <script>
import { mapActions } from 'vuex'

export default {
  data: () => ({
    form: {
      username: '',
      password: ''
    }
  }),
  components: {},
  methods: {
    ...mapActions('auth', ['ActionDoLogin']),
    async submit () {
      try {
        await this.ActionDoLogin(this.form)
        this.$router.push({ name: 'Dashboard', params: { p: true } })
      } catch (err) {
        alert(err.data ? err.data.message : 'Não foi possivel fazer login')
      }
    }
  }
}
</script>
  

При рендеринге страницы выполняется перезагрузка для обновления страницы.
Использование условия if для установки p в false и перезагрузки один раз.

 mounted () {
    LoadSession.get().then(resp => {
      this.user = resp.data
    })
    if (this.$route.params.p) {
      this.$route.params.p = false
      location.reload()
    }
}
  

Я все еще ищу лучшее решение, но на какое-то время этого достаточно…