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

Question

[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 сессии. После этого бэк корректно отрабатывает запросы исходя из прав пользователя. Как это можно использовать для управления доступом к путям на фронте?

Comments

[VegasChickiChicki]

Не совсем могу понять, что означает "устанавливается кука с id сессии" какая кука, куда устанавливается?

[Даша Циклаури]

VegasChickiChicki, иди учи матчасть.
Кука устанавливается в браузере на домен со значением ключа сессии. Тут не важно http-only или нет.

Answer 1

[Олег]

Как вариант сделать поинт для получения данных сессии 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

Comments

[Robur]

вот тут правильное направление, другие ответы ни о чем.
вам на фронте надо получить роли пользователя и в соответствии с ними показывать/скрывать разные части приложения.
вот тут есть чуть-чуть кода гварда для роутера https://router.vuejs.org/guide/advanced/navigation...
Но можно и по другому как-нибудь, главное храните текущего пользователя и его права в приложении

[Nayob]

А права нужно сверять с бэком только при старте приложения? В теории пользователь может их изменить раз они хранятся на фронте?
Понятно, что на бэке своя проверка при запросе данных, но все же не хотелось бы, чтобы пользователь не лазил где не надо.

[Олег]

Nayob, Достаточно при старте, пользователь конечно может увидеть какие-то страницы/кнопки (если очень захочет и имеет подходящие навыки), но сервер не отдаст данные или выбросит ошибку 403, навредить тут будет сложно

[Nayob]

Олег, Спасибо!

Answer 2

[Константин Б.]

Никак. Кроме варианта выкидывать ошибку с бекенда и обрабатывать ее в axios

Comments

[Nayob]

А как аутентификацию реализуют в нормальных проектах?
После авторизации получить ответ с сервера, сохранить некие данные в локальное хранилище и использовать данные уже из него?

[de1m]

Nayob, когда пользователь заходит первый раз на страницу, то проверяется есть ли у него куки с нужной информацией(какой-нибудь ключ). Если всё нормально, то тогда он спокойно передвигается по странице. Если нет, то он пересылается на логин, чтобы получить свою сессию.
На всех страницах, где можно находится только зарегистрировынным пользовательм, надо всегда проверять права.
В вуе это делается в роутере, ну или точнее говоря так можно сделать.
Вот тут вроде описывают

Answer 3

[Aleks_Ko]

firebase попробуйте. Там все есть и авторизация и база данных и документация адекватная

Comments

[Nayob]

Хочу разобраться с vue