Как я защищаю свою маршрутизацию Vue.js при работе с токеном API и JWT? - PullRequest
Новая
       48

Как я защищаю свою маршрутизацию Vue.js при работе с токеном API и JWT?

0 голосов
/ 07 ноября 2019

Я создаю приложение с Adonis.js для API и Vue.js для внешнего интерфейса. Я использую токен JWT для защиты всех маршрутов моего API.

Я понимаю силу JWT для защиты маршрутов API. Когда пользователь создает учетную запись, создается токен для идентификации пользователя.

Когда я вызываю свой API из Vue, я записываю токен активного пользователя в заголовок, а в своем API я проверяю, является ли токен«Активный» и если он назначен учетной записи пользователя (и после этого вызов в мои базы данных ..).

Но проблема в том, что (для меня) я не понимаю, как я могу сделать промежуточное ПОна мой маршрут (проверьте, является ли пользователь аутентификационным). Я прочитал некоторый учебник об этом, и пришел вывод => сохранить токен в локальном хранилище (хорошо, это логично) и сделать промежуточное ПО, просто проверяя, существует ли токен.

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

Я очень смущен этой концепцией .. вы можете открыть мне глаза, а? Спасибо

1 Ответ

1 голос
/ 07 ноября 2019

Так что да, вы были правы, что вам следует использовать Vuex для хранения значения токена, чтобы получить его с помощью getters в ваших компонентах / промежуточном программном обеспечении. Ваш state будет выглядеть примерно так: 

export const state = () => ({
    api_token: localStorage.getItem("api_token")
});

И getters будет выглядеть примерно так: 

export const getters = {
    apiToken(state) {
        return state.api_token;
    }
}

Для защиты маршрутов во внешнем интерфейсе вы будете использоватьфункции защиты маршрутизатора (https://router.vuejs.org/guide/advanced/navigation-guards.html). Чтобы дать вам представление, вот как будет выглядеть простая проверка: 

router.beforeEach((to, from, next) => {
  if (!store.getters["auth/apiToken"]) next('/login');
  else next();
})

Удачи!

...