From 8aef2f517763760681c624f0a7c8a417f5059dab Mon Sep 17 00:00:00 2001 From: AndroidDrew Date: Thu, 28 Dec 2017 17:47:58 -0500 Subject: [PATCH] Completed API module Added calls to an external API and JWT authentication to the webapplication --- build/webpack.base.config.js | 4 +-- package.json | 1 + src/app.service.js | 60 +++++++++++++++++++++++++++++++ src/theme/Category.vue | 20 ++++++----- src/theme/Login.vue | 70 ++++++++++++++++++++++++++++++++++-- 5 files changed, 142 insertions(+), 13 deletions(-) create mode 100644 src/app.service.js diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js index 8612257..24d1b34 100644 --- a/build/webpack.base.config.js +++ b/build/webpack.base.config.js @@ -25,8 +25,8 @@ module: { rules: [ { - enforce: 'pre', //check source files before they are loader by other loaders - test: /(\.js$)|(\.vue$)/, //linting for both js and vue files + enforce: 'pre', // check source files before they are loader by other loaders + test: /(\.js$)|(\.vue$)/, // linting for both js and vue files loader: 'eslint-loader', exclude: /node_modules/ }, diff --git a/package.json b/package.json index 93d7882..986da01 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "author": "Drew Bednar", "license": "MIT", "dependencies": { + "axios": "^0.17.1", "bulma": "^0.6.1", "express": "^4.16.2", "vue": "^2.5.6", diff --git a/src/app.service.js b/src/app.service.js new file mode 100644 index 0000000..e7b0ce4 --- /dev/null +++ b/src/app.service.js @@ -0,0 +1,60 @@ +import axios from 'axios' + +axios.defaults.baseURL = 'https://api.fullstackweekly.com' + +// To avoid adding the token to every request we make to a service we can +// instead use an interceptor +axios.interceptor.request.use(function (config) { + // added for when the code is running on a server for serverside rendering + if (typeof window === 'undefined') { + return config + } + const token = window.localStorage.getItem('token') + if (token) { + config.headers.Authorization = `Bearer ${token}` + } + + return config +}) + +const appService = { + getPosts (categoryId) { + // I guess we can do some string format like operations here + // This is a promise so once it is resolved we will receive the response + return new Promise((resolve) => { + axios.get(`/wp-json/wp/v2/posts?categories=${categoryId}&per_page=6`) + .then(response => { + resolve(response.data) + }) + }) + }, // getPosts + getProfile () { + return new Promise((resolve) => { + axios.get('/services/profile.php' // , + /* + { + headers: { + 'Authorization': `Bearer ${window.localStorage.getItem('token')}` + } + } + */ + ) + .then(response => { + resolve(response.data) + }) + }) + }, // getProfile + login (credentials) { // credemtials will be a javascript object + // returns a new promise + return new Promise((resolve, reject) => { + axios.post('/services/auth.php', credentials) + .then(response => { + resolve(response.data) + }).catch(response => { + reject(response.status) + }) + }) + } // login +} + +export default appService diff --git a/src/theme/Category.vue b/src/theme/Category.vue index 47601b7..f6eb4f9 100644 --- a/src/theme/Category.vue +++ b/src/theme/Category.vue @@ -2,15 +2,16 @@
-

{{ post.title }}

- {{ post.content }} - Read More +

+ + Read More