Vue aplikace pro přístup k API č.5 – Zabezpečení stránek pouze pro přihlášené
- Vue aplikace pro přístup k API č.1 – Instalace Vue
- Vue aplikace pro přístup k API č.2 – Připojení k našemu API
- Vue aplikace pro přístup k API č.3 – Přidáme si do Vue stránky
- Vue aplikace pro přístup k API č.4 – Přihlášení ve Vue
- Vue aplikace pro přístup k API č.5 – Zabezpečení stránek pouze pro přihlášené
- Vue aplikace pro přístup k API č.6 – Přidáme si Vuetify
- Vue aplikace pro přístup k API č.7 – Vytvoříme si základní layout aplikace
- Vue aplikace pro přístup k API č.8 – Vypíšeme si produkty v naší vue aplikaci
V minulém díle jsem si přidali do naší aplikace možnost přihlášení do API. Dnes bych chtěla pojračovat v zabezepčení celé aplikace, tak aby byla dostupná pouze pro přihlášené uživatele.
Protože pro přihlášení používáme cookies tak si nejprve do celé aplikace naistalijeme knihovn pro práci s cookies.
npm install js-cookie
upravíme si router a to tak, že vytvoříme navigation guard, který bude kontrolovat chráněné routy
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { createRouter, createWebHistory } from 'vue-router' import authService from '@/services/auth' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true } }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta: { requiresGuest: true } }, { path: '/users', name: 'Users', component: () => import('@/views/Users.vue'), meta: { requiresAuth: true } }, { path: '/products', name: 'Products', component: () => import('@/views/Products.vue'), meta: { requiresAuth: true } }, ], }) // Navigation guard router.beforeEach((to, from, next) => { const isAuthenticated = authService.isAuthenticated() if (to.meta.requiresAuth && !isAuthenticated) { // Uživatel není přihlášen a stránka vyžaduje autentizaci next({ name: 'Login', query: { redirect: to.fullPath }}) } else if (to.meta.requiresGuest && isAuthenticated) { // Uživatel je přihlášen a stránka je jen pro nepřihlášené next({ name: 'Home' }) } else { next() } }) export default router |
v Login.vue si upravíme obsluhi přihlášení
|
1 2 3 4 5 |
// V metodě handleLogin if (success) { const redirect = this.$route.query.redirect || '/' this.$router.push(redirect) } |
a v api.js si upravíme interceptor pro požadavky
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Interceptor s hlavičkou authtoken api.interceptors.request.use(config => { const token = Cookies.get('auth_token') if (token) { config.headers.authtoken = token } return config }, error => { return Promise.reject(error) }) // Response interceptor pro handling 401 chyb api.interceptors.response.use( response => response, error => { if (error.response?.status === 401) { Cookies.remove('auth_token') window.location.href = '/login' } return Promise.reject(error) } ) |
a v auth.js ještě upravíme metody login a logout, isAuthenticated a getToken
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
async login(credentials) { try { const response = await api.post('/login', credentials) if (response.data.success) { this.user = response.data.user // Uložení tokenu do cookies Cookies.set('auth_token', response.data.token, { expires: 7, // Token vyprší za 7 dní secure: process.env.NODE_ENV === 'production' }) return true } return false } catch (error) { console.error('Login error:', error) throw error.response?.data?.message || 'Přihlášení se nezdařilo' } } logout() { this.user = null Cookies.remove('auth_token') // Volitelně: Odhlášení na serveru return api.post('/logout') } isAuthenticated() { return !!Cookies.get('auth_token') } // Metoda pro získání tokenu (užitečné pro API calls) getToken() { return Cookies.get('auth_token') } |
No a nyní vše vyzkoušejte, zda vše funguje dle našich požadavků