VueJS / Vuex App - проверка токена JWT, используемого для аутентификации - PullRequest
Новая
       15

VueJS / Vuex App - проверка токена JWT, используемого для аутентификации

0 голосов
/ 14 ноября 2018

У меня есть приложение VueJS, использующее Vuex & Vue Router. У меня есть 3 компонента (которые также являются страницами): Домашняя страница, Логин и Защищенная страница, для которой требуется аутентификация.

Страница входа в систему выполняет POST-вызов бэкэнд-API, который возвращает токен, если учетные данные верны. 

  methods: {
    sendCredentials: function() {
      const { email, password } = this
      this.$store.dispatch(AUTH_REQUEST, {email, password})
      .then(() => {
          this.$router.push('/')
      })
      .catch((err) => console.log(err.response));
    }
  }

Вот соответствующее действие: 

actions: {
    [AUTH_REQUEST]: ({ commit, dispatch }, user) => {
        return new Promise((resolve, reject) => {
            commit(AUTH_REQUEST);
            axios.post('http://localhost:3000/api/login', user)
                .then((resp) => {
                    const token = resp.data.token;
                    localStorage.setItem('userToken', token);
                    commit(AUTH_LOGIN, token);
                    resolve(resp);
                })
                .catch(err => {
                    commit(AUTH_ERROR, err);
                    localStorage.removeItem('userToken');
                    reject(err);
                })

        });
    }

Я использовал навигационную охрану, чтобы заблокировать доступ к защищенной странице, если пользователь не вошел в систему.

Это на самом деле работает: когда я захожу на защищенную страницу, меня просят войти в систему. Когда я использую учетные данные прав, я могу получить доступ к защищенной странице.

У меня еще есть огромная ошибка: когда я помещаю любую произвольную строку в localStorage в качестве userToken, я могу получить доступ к защищенной странице ...

Как это предотвратить?

Исходное состояние определяется следующим образом: 

state: {
    token: localStorage.getItem('userToken') || '',
},

Есть ли способ проверки userToken, который я получаю через localStorage, когда я устанавливаю начальное состояние токена?

1 Ответ

0 голосов
/ 15 ноября 2018

Я давно удивлялся тому же. В итоге я проверил токен по отношению к вашему бэкэнду при начальной загрузке вашей страницы. Если токен действителен, вы передаете его в Vuex, если токен недействителен, вы удаляете все из localStorage.

Это приводит к тому, что кто-то гипотетически может заменить токен после первоначальной загрузки своим собственным недействительным токеном, но если клиентский токен уже проверен, какой будет смысл? Если вы хотите обезопасить себя и от этого сценария, вы можете применить ту же логику в своей защите навигации. Поэтому не просто проверяйте токен, но проверяйте токен по отношению к вашему бэкенду при каждом изменении маршрута и очищайте localStorage, если он недействителен. Я думаю, что это приведет к снижению производительности, хотя из-за дополнительного вызова API.

...