uwierzytelniania JWT z Vue.js

Question

pracuję na OSO z Vue.js i vue-router i mam teraz do czynienia z autoryzacji/uwierzytelnienia za pomocą JWT. Mam uporządkowany koniec (punkt końcowy API), tak, że wyda token w odpowiedzi na logowanie i sprawdza wymagany nagłówek w kolejnych żądaniach. Teraz chcę zaimplementować stronę klienta (Vue.js).

Jak rozumiem, zasadniczo to, co trzeba zrobić, to wymaga uwierzytelniania dla wszystkich trasach oprócz „/” i „/ login”. Jeśli uwierzytelnienie jest obecne, przesyłam token (który jest przechowywany w localStorage po pomyślnym zalogowaniu) w nagłówku autoryzacji. Jeśli nie uda się sprawdzić poprawności na serwerze, użytkownik zostanie przekierowany do "/ login" w wyniku odpowiedzi na błąd.

Tak, mam kilka pytań na temat tego, co trzeba zrobić, aby wdrożyć to:

1. Jak najlepiej przesłać nagłówek z każdego żądania, oprócz do punktu końcowego logowania? Wiem z JQuery, którego używam do AJAX, mogę skonfigurować globalny "ajaxSetup", który spowoduje, że nagłówek zostanie przesłany przy każdym żądaniu, ale jak mogę określić wyjątki? Uciążliwe jest indywidualne dodawanie nagłówka do każdego żądania punktu końcowego interfejsu API.

2. Podobnie, jak skonfigurować kontrolę wstępną uwierzytelniania, która dotyczy wszystkich tras poza wymienionymi 2 ("/" i "/ login")?

3. Biorąc pod uwagę, że używam obecności lub w inny sposób pozornie prawidłowego uwierzytelnienia (widocznie z tego powodu, że wciąż musi być sprawdzona na punkcie końcowym API), aby określić, czy wyświetlić niektóre pozycje menu itp., Czy jest to wykonalne aby było to bardziej szczegółowe i pokazywać różne rzeczy dla różnych poziomów uprawnień, zgodnie z określeniem w polu "Zakres" we wczytywanym tokenie? Najwyraźniej najprostszym sposobem na zajęcie się tokenem JWT jest wyłącznie ustalenie, czy jest on obecny, czy też nie, więc nie jest wymagane analizowanie zawartości po stronie klienta. Ale biorąc pod uwagę, że JWT dopuszcza znaczącą treść, czy nie jest dobrym pomysłem, aby spróbować skorzystać z tego znaczenia po stronie klienta, a także serwera? Oczywiście staje się to mniej praktyczne, jeśli token jest sam w sobie zaszyfrowany, więc moim pomysłem byłoby użycie niezaszyfrowanych tokenów (i upewnienie się, że nic nie wynika z ładunku).

Answer 1

Można zrobić nagłówki globalnych, a gdy użytkownik jest uwierzytelniony, dodać do globalnych nagłówkach token jak w poniższym przykładzie, używam Axios.

axios.defaults.headers.common['Authorization'] = "Bearer"+ authtoken.token 

Do sprawdzania uwierzytelnienia użytkownika lub zarządzać części swojej stronie internetowej, wystarczy dodać zmienną globalną, a gdy użytkownik jest uwierzytelniony ustawić zmienną na true. Alternatywnie, użyj Vuex i będzie to łatwe i element chcesz ukryć lub pokazać użytkownikowi po prostu dodać v-jeśli do elementu podobnego (przykład stosując Vuex)

<div v-if="this.$store.state.authenticated"> Hide Element from Guests </div> 

I na trasie, w swojej trasy dodać meta pole, aby wskazać ścieżkę to wymaga uwierzytelnienia

{ 
     path: '/dashboard', 
     component: DashboardPage, 
     name: 'Dashboard', 
     meta: {requiresAuth: true} // Meta Field , you can name it 
} 

W konfiguracji Vue Router dodaj nawigowania osłon sprawdzić obecność pola meta, a jeśli prawdą sprawdzić, czy użytkownik jest uwierzytelniony

const router = new VueRouter({ ... }) 

router.beforeEach((to, from, next) => { 
    if(to.meta.requiresAuth) { // check the meta field 
    if(store.state.Authenticated) { // check if the user is authenticated 
     next() // the next method allow the user to continue to the router 
    } 
    else { 
     next('/') // Redirect the user to the main page 
    } 
} 
else { 
    next() 
} 
})