@Nayob

Аутентификация на фронтэнде после авторизации на бэкэнде. Как реализовать?

Собственно есть такой кусок кода:
import axios from 'axios'
axios.defaults.withCredentials = true;

export default {
    name: 'Home',
    data(){
      return {
        username : "",
        password : ""
      }
    },
    methods: {
        login(e) {
            e.preventDefault();
            axios 
            .post('https://localhost:3011/login', {
                username: this.username,
                password: this.password,
            })
            .then(() => {this.$router.push("/")})
            .catch(error => console.log(error));
        },


после выполнения метода login на бэке создается сессия и устанавливается кука с id сессии. После этого бэк корректно отрабатывает запросы исходя из прав пользователя. Как это можно использовать для управления доступом к путям на фронте?
  • Вопрос задан
  • 267 просмотров
Решения вопроса 1
werty1001
@werty1001
undefined
Как вариант сделать поинт для получения данных сессии GET /auth бек будет отдавать данные, если есть сессия или возвращать ошибку 401 если пользователь неавторизован. В сторе vue создайте модуль user:
export default {
  state: {
    user: null,
  },
  getters: {
    isAuthenticated: ({ user }) => Boolean(user),
  },
  actions: {
    getUser({ commit, dispatch }) {
      return this.$axios.get('/auth')
        .then(user => commit('setUser', user))
        .catch(() => dispatch('logout'));
    },
    login({ dispatch }, { email, password }) {
      return this.$axios.post('/login', {
        email, password,
      })
        .then(() => dispatch('getUser'));
    },
    logout({ commit }) {
      commit('unsetUser');
    },
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    unsetUser(state) {
      state.user = null;
    },
  },
};

При старте приложения вызываем getUser, если есть сессия показываем что-то в противном случае форму авторизации, еще в корне приложения можно подписаться на ошибки стора this.$store.subscribeAction и ловить 401, чтобы сделать logout
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Kostik_1993
Fullstack Web Developer | PHP | Laravel | Vue.js
Никак. Кроме варианта выкидывать ошибку с бекенда и обрабатывать ее в axios
Ответ написан
@Aleks_Ko
firebase попробуйте. Там все есть и авторизация и база данных и документация адекватная
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы