#login #nuxt.js #api-platform.com
#аутентификация #nuxt.js #api-platform.com
Вопрос:
Я новичок в Nuxt и платформе API. Я создал базовый сервер и клиент и пытаюсь разобраться, как осуществлять управление сеансами.
Я могу войти в систему исключительно на стороне клиента, например, используя поддержку Nuxt Auth0. Или я могу ввести свой собственный логин. Но это только на стороне клиента. Или я могу использовать форму входа на сервере Symfony и отправлять на нее сообщения с клиента, но это только на стороне сервера.
Я хочу, чтобы Nuxt мог определять, авторизован я в Symfony или нет. Каков правильный способ сделать это для универсального приложения Nuxt, использующего платформу API? Промежуточное программное обеспечение? Промежуточное программное обеспечение сервера? nuxtserverinitить?
Комментарии:
1. при обновлении браузера vuex не будет сохраняться. лучше использовать файлы cookie или локальное хранилище для поддержания сеанса или для поддержания входа пользователя в систему.
2. @HardikShah — да. Но это просто выполнение входа в систему на стороне клиента. Что я хочу знать, так это как обмениваться информацией для входа между моим клиентом Nuxt и серверной частью моей платформы API. Я немного упростил вопрос.
3. Я надеюсь, что у вас есть конечная точка API, такая как ‘/ api / login’. Когда вы нажимаете на эту конечную точку API после успешного завершения, вы можете получать информацию об авторизации (хранить в локальном хранилище / cookie) для вошедшего пользователя, которую требуется отправлять каждый раз, когда пользователь входит в систему или выполняет какие-либо действия после входа.
Ответ №1:
У меня есть кое-что, что работает, поэтому я подумал, что опубликую здесь ответ на случай, если другим людям будет полезно получить несколько советов.
Основная идея заключается в:
- На стороне Nuxt используйте промежуточное программное обеспечение, чтобы проверить, авторизованы ли мы на сервере, прежде чем произойдет остальная часть рендеринга страницы.
- На стороне платформы API настройте аутентификацию JWT в соответствии с here. Это дает нам токен, который мы будем отправлять по запросам API для их проверки.
В клиенте Nuxt вам нужно хранилище, которое обрабатывает состояние входа в систему. Вот моя текущая версия WIP (поэтому я не утверждаю, что это отличный код):
import axios from 'axios'
export default function({ store, redirect }) {
store.commit('security/AUTHENTICATING')
// Add token header if we have it.
const token = store.state.security.token
if (token) {
axios.defaults.headers.common.Authorization = 'Bearer ' token.toString()
} else {
axios.defaults.headers.common.Authorization = null
}
// Now make an API call to see if we're logged in.
return axios
.get(process.env.API '/locations')
.then(response => {
// We're logged in. No need to save the token - it's already in the store.
store.commit('security/AUTHENTICATING_SUCCESS', null)
})
.catch(() => {
// We're not logged in.
if (store.state.security.isAuthenticated) {
// ...but we thought we were. Correct our misapprehension.
store.commit('security/LOGOUT')
}
// Ask them to log in.
return redirect('/login')
})
} Затем настройте некоторое промежуточное программное обеспечение:
import axios from 'axios'
export default function({ store, redirect }) {
store.commit('security/AUTHENTICATING')
// Add token header if we have it.
const token = store.state.security.token
if (token) {
axios.defaults.headers.common.Authorization = 'Bearer ' token.toString()
} else {
axios.defaults.headers.common.Authorization = null
}
// Now make an API call to see if we're logged in.
return axios
.get(process.env.API '/locations')
.then(response => {
// We're logged in. No need to save the token - it's already in the store.
store.commit('security/AUTHENTICATING_SUCCESS', null)
})
.catch(() => {
// We're not logged in.
if (store.state.security.isAuthenticated) {
// ...but we thought we were. Correct our misapprehension.
store.commit('security/LOGOUT')
}
// Ask them to log in.
return redirect('/login')
})
} Я пока не совсем доволен этим, и я уверен, что это могло быть лучше. Но что-то в этом роде, похоже, справится с этой задачей.
Комментарии:
1. В вашем файле axios
const token = store.state.security.tokenчто, если пользователь вошел в систему и обновил какую-либо страницу?2. Извините, я не понимаю вашего вопроса.
3. значение токена [
const token = store.state.security.token], к которому вы получаете доступ из хранилища vuex, что, если пользователь вошел в систему и обновил какую-либо страницу?4. Вы сохраняете хранилище, например, с помощью vuex / persisted-state.