From 2703c5ecd71679d831c5d7ab2ded5d86daab9356 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 22 Jun 2022 16:19:32 -0300 Subject: [PATCH] Adds basic authentication to all requests. #20. --- src/components/base/BaseLayout.vue | 2 +- src/pages/CollectionPage.vue | 6 ++-- src/pages/ItemsPage.vue | 6 ++-- src/pages/LoginPage.vue | 15 +++++----- src/store/storeTainacan.ts | 44 +++++++++++++++++++++++------- src/store/storeWp.ts | 29 +++++++++++++++----- 6 files changed, 72 insertions(+), 30 deletions(-) diff --git a/src/components/base/BaseLayout.vue b/src/components/base/BaseLayout.vue index 4f55d18..3e9474e 100644 --- a/src/components/base/BaseLayout.vue +++ b/src/components/base/BaseLayout.vue @@ -68,7 +68,7 @@ export default { }, methods: { async logOff(){ - await this.wpStore.userLogOff(); + await this.wpStore.logoff(); this.$router.go(); } } diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue index e6bf6a2..f081c4a 100644 --- a/src/pages/CollectionPage.vue +++ b/src/pages/CollectionPage.vue @@ -38,7 +38,8 @@ import { IonIcon, IonButton, actionSheetController, - IonInfiniteScroll + IonInfiniteScroll, + IonInfiniteScrollContent } from '@ionic/vue'; import BaseLayout from '@/components/base/BaseLayout.vue'; import ItemsList from '@/components/lists/ItemsList.vue'; @@ -51,7 +52,8 @@ export default defineComponent({ IonRefresherContent, IonIcon, IonButton, - IonInfiniteScroll + IonInfiniteScroll, + IonInfiniteScrollContent }, props: { id: String, diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue index 9974bd6..e88f3e2 100644 --- a/src/pages/ItemsPage.vue +++ b/src/pages/ItemsPage.vue @@ -24,7 +24,8 @@ import { IonLoading, IonRefresher, IonRefresherContent, - IonInfiniteScroll + IonInfiniteScroll, + IonInfiniteScrollContent } from '@ionic/vue'; import BaseLayout from '@/components/base/BaseLayout.vue'; import { ref } from 'vue'; @@ -36,7 +37,8 @@ export default { BaseLayout, IonRefresher, IonRefresherContent, - IonInfiniteScroll + IonInfiniteScroll, + IonInfiniteScrollContent }, setup() { const isLoading = ref(false); diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue index 1892430..6fc811e 100644 --- a/src/pages/LoginPage.vue +++ b/src/pages/LoginPage.vue @@ -44,10 +44,10 @@ @@ -72,6 +72,7 @@ import { useWpStore } from '../store/storeWp'; import { arrowForwardOutline } from "ionicons/icons"; import { + IonIcon, IonImg, IonPage, IonList, @@ -87,6 +88,7 @@ import { computed } from 'vue'; export default { props: ['pageTitle', 'pageDefaultBackLink'], components: { + IonIcon, IonImg, IonPage, IonList, @@ -102,7 +104,7 @@ export default { return { siteUrl: '', userLogin: '', - userPassword: '', + userToken: '', } }, setup(){ @@ -113,10 +115,7 @@ export default { }, methods: { async login(){ - await this.wpStore.userLogin(this.siteUrl); - // this.tainacanStore.siteUrl = this.siteUrl; - // this.tainacanStore.userLogin = this.userLogin; - // this.tainacanStore.userPassword = this.userPassword; + await this.wpStore.login(this.siteUrl, this.userLogin, this.userToken); this.$router.push('/home'); } } diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts index 586db0b..298e192 100644 --- a/src/store/storeTainacan.ts +++ b/src/store/storeTainacan.ts @@ -16,10 +16,7 @@ const useTainacanStore = defineStore("tainacan", { nextItemsByCollectionPage: 1, items: [], nextItemsPage: 1, - totalItems: 0, - siteUrl: "", - userLogin: "", - userPassword: "", + totalItems: 0 }; }, @@ -29,6 +26,7 @@ const useTainacanStore = defineStore("tainacan", { const wpStore = useWpStore(); let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?`; + const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken); if (params && params.perPage) endpoint += '&perpage=' + params.perPage; @@ -36,7 +34,11 @@ const useTainacanStore = defineStore("tainacan", { if (params && params.orderBy) endpoint += '&orderby=' + params.orderBy; - const response = await axios.get(endpoint); + const response = await axios.get(endpoint, { + headers: { + authorization: authorization + } + }); this.collections = response.data; this.totalCollections = response.headers['x-wp-total']; @@ -55,8 +57,13 @@ const useTainacanStore = defineStore("tainacan", { const wpStore = useWpStore(); const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`; + const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken); - const response = await axios.get(endpoint); + const response = await axios.get(endpoint, { + headers: { + authorization: authorization + } + }); this.homeCollections = response.data; this.totalHomeCollections = response.headers['x-wp-total']; @@ -75,6 +82,7 @@ const useTainacanStore = defineStore("tainacan", { const wpStore = useWpStore(); let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`; + const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken); if (params && params.perPage) endpoint += '&perpage=' + params.perPage; @@ -93,7 +101,11 @@ const useTainacanStore = defineStore("tainacan", { endpoint += '&paged=' + this.nextItemsByCollectionPage; - const response = await axios.get(endpoint); + const response = await axios.get(endpoint, { + headers: { + authorization: authorization + } + }); this.collectionItems.push(...response.data.items); this.totalCollectionItems = response.headers['x-wp-total']; @@ -120,8 +132,14 @@ const useTainacanStore = defineStore("tainacan", { const wpStore = useWpStore(); const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`; + const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken); + + const response = await axios.get(endpoint, { + headers: { + authorization: authorization + } + }); - const response = await axios.get(endpoint); this.homeItems = response.data.items; this.totalHomeItems = response.headers['x-wp-total']; @@ -138,6 +156,7 @@ const useTainacanStore = defineStore("tainacan", { const wpStore = useWpStore(); let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail`; + const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken); if (params && params.perPage) endpoint += '&perpage=' + params.perPage; @@ -145,14 +164,19 @@ const useTainacanStore = defineStore("tainacan", { if (params && params.orderBy) endpoint += '&orderby=' + params.orderBy; - if(params.reset){ + if (params.reset) { this.items = []; this.nextItemsPage = 1; } endpoint += '&paged=' + this.nextItemsPage; - const response = await axios.get(endpoint); + const response = await axios.get(endpoint, { + headers: { + authorization: authorization + } + }); + this.items.push(...response.data.items); this.totalItems = response.headers['x-wp-total']; diff --git a/src/store/storeWp.ts b/src/store/storeWp.ts index cde6a8c..9eb1aa9 100644 --- a/src/store/storeWp.ts +++ b/src/store/storeWp.ts @@ -8,33 +8,46 @@ const useWpStore = defineStore('wp', { return { userIsLoggedIn: false, userSiteUrl: '', + userLogin: '', + userToken: '' } }, actions: { - async userLogin(userSiteUrl: string) { + async login(userSiteUrl: string, userLogin: string, userToken: string) { try { this.userIsLoggedIn = true; this.userSiteUrl = userSiteUrl; + this.userLogin = userLogin; + this.userToken = userToken; await store.set('userIsLoggedIn', true); await store.set('userSiteUrl', userSiteUrl); + await store.set('userLogin', userLogin); + await store.set('userToken', userToken); } catch (err) { this.userIsLoggedIn = false; - await store.set('userIsLoggedIn', false); + this.userSiteUrl = ''; + this.userToken = ''; + this.userLogin = ''; console.error('Erro no login:', err); return err; } }, - async userLogOff() { + async logoff() { try { this.userIsLoggedIn = false; - this.userSiteUrl = null; + this.userSiteUrl = ''; + this.userToken = ''; + this.userToken = ''; await store.set('userIsLoggedIn', false); - await store.set('userSiteUrl', null); + await store.set('userSiteUrl', ''); + await store.set('userToken', ''); } catch (err) { this.userIsLoggedIn = false; - await store.set('userIsLoggedIn', false); - console.error('Erro no login:', err); + this.userSiteUrl = ''; + this.userToken = ''; + this.userToken = ''; + console.error('Erro no logoff:', err); return err; } }, @@ -42,6 +55,8 @@ const useWpStore = defineStore('wp', { await store.create(); this.userIsLoggedIn = await store.get('userIsLoggedIn'); this.userSiteUrl = await store.get('userSiteUrl'); + this.userLogin = await store.get('userLogin'); + this.userToken = await store.get('userToken'); } } })