diff --git a/layouts/default.vue b/layouts/default.vue index f75ee51..b2b6a23 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -332,6 +332,7 @@ href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem" + @click="logout" >Logout @@ -623,6 +624,7 @@ href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem" + @click="logout" >Logout @@ -656,6 +658,8 @@ export default { const token = await this.$magic.user.getIdToken() this.$store.commit('auth/setToken', token) this.$store.commit('auth/setLoggedIn', loggedIn) + const d = await this.$api.$get('/api/movies') + console.log({ d }) }, methods: { toggleUserMenu() { @@ -664,6 +668,11 @@ export default { toggleSidebar() { this.sidebarToggled = !this.sidebarToggled }, + async logout() { + await this.$magic.user.logout() + this.$store.commit('auth/setToken', null) + this.$store.commit('auth/setLoggedIn', false) + }, }, } diff --git a/nuxt.config.js b/nuxt.config.js index 9c02109..9304303 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -17,6 +17,8 @@ export default { plugins: [ { src: '~/plugins/magic.js', mode: 'client' }, { src: '~/plugins/vue-splide.js', mode: 'client' }, + { src: '~/plugins/mirage.js', mode: 'client' }, + { src: '~/plugins/axios.js', mode: 'client' }, ], // Auto import components (https://go.nuxtjs.dev/config-components) @@ -45,5 +47,6 @@ export default { build: {}, env: { magicPublicKey: process.env.NUXT_ENV_PUBLIC_MAGIC_KEY, + baseApiUrl: process.env.NUXT_ENV_BASE_API_URL, }, } diff --git a/package-lock.json b/package-lock.json index e1a7821..1aae84b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1155,6 +1155,12 @@ "resolved": "https://registry.npmjs.org/@magic-sdk/types/-/types-2.0.1.tgz", "integrity": "sha512-VB7h0i7et7fu5WViZZQz+b/CHUcTuLxC64Wbd+d1f6+dJyPFpUeWRkt5X9LP48pIVmZpz57NQB48/y7YKy91uw==" }, + "@miragejs/pretender-node-polyfill": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz", + "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==", + "dev": true + }, "@nodelib/fs.scandir": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz", @@ -5869,6 +5875,12 @@ } } }, + "fake-xml-http-request": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.1.tgz", + "integrity": "sha512-Kn2WYYS6cDBS5jq/voOfSGCA0TafOYAUPbEp8mUVpD/DVV5bQIDjlq+MLLvNUokkbTpjBVlLDaM5PnX+PwZMlw==", + "dev": true + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -7008,6 +7020,12 @@ "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==" }, + "inflected": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz", + "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==", + "dev": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -7894,22 +7912,136 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", + "dev": true + }, + "lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", + "dev": true + }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, + "lodash.compact": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz", + "integrity": "sha1-VAzjg3dFl1gHRx4WtKK6IeclbKU=", + "dev": true + }, + "lodash.find": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz", + "integrity": "sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=", + "dev": true + }, + "lodash.flatten": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz", + "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=", + "dev": true + }, + "lodash.forin": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz", + "integrity": "sha1-XT8grlZAEfvog4H32YlJyclRlzE=", + "dev": true + }, "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", "dev": true }, + "lodash.has": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz", + "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=", + "dev": true + }, + "lodash.invokemap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz", + "integrity": "sha1-F0jNpdiw74NpxOs+xUwh/rofLWI=", + "dev": true + }, + "lodash.isempty": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz", + "integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=", + "dev": true + }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", + "dev": true + }, + "lodash.isfunction": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz", + "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==", + "dev": true + }, + "lodash.isinteger": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz", + "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=", + "dev": true + }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", + "dev": true + }, "lodash.kebabcase": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=" }, + "lodash.lowerfirst": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz", + "integrity": "sha1-3jx7EuAsZSSgBZwvbLfFxSZVoT0=", + "dev": true + }, + "lodash.map": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", + "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=", + "dev": true + }, + "lodash.mapvalues": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz", + "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=", + "dev": true + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=" }, + "lodash.pick": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz", + "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=", + "dev": true + }, + "lodash.snakecase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz", + "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=", + "dev": true + }, "lodash.template": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", @@ -7938,6 +8070,18 @@ "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=" }, + "lodash.uniqby": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz", + "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=", + "dev": true + }, + "lodash.values": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz", + "integrity": "sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=", + "dev": true + }, "lodash.zip": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.zip/-/lodash.zip-4.2.0.tgz", @@ -8363,6 +8507,40 @@ "minipass": "^3.0.0" } }, + "miragejs": { + "version": "0.1.41", + "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.41.tgz", + "integrity": "sha512-ur8x7sBskgey64vdzKGVCVC3hgKXWl2Cg5lZbxd6OmKrhr9LCCP/Bv7qh4wsQxIMHZnENxybFATXnrQ+rzSOWQ==", + "dev": true, + "requires": { + "@miragejs/pretender-node-polyfill": "^0.1.0", + "inflected": "^2.0.4", + "lodash.assign": "^4.2.0", + "lodash.camelcase": "^4.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.compact": "^3.0.1", + "lodash.find": "^4.6.0", + "lodash.flatten": "^4.4.0", + "lodash.forin": "^4.4.0", + "lodash.get": "^4.4.2", + "lodash.has": "^4.5.2", + "lodash.invokemap": "^4.6.0", + "lodash.isempty": "^4.4.0", + "lodash.isequal": "^4.5.0", + "lodash.isfunction": "^3.0.9", + "lodash.isinteger": "^4.0.4", + "lodash.isplainobject": "^4.0.6", + "lodash.lowerfirst": "^4.3.1", + "lodash.map": "^4.6.0", + "lodash.mapvalues": "^4.6.0", + "lodash.pick": "^4.4.0", + "lodash.snakecase": "^4.1.1", + "lodash.uniq": "^4.5.0", + "lodash.uniqby": "^4.7.0", + "lodash.values": "^4.3.0", + "pretender": "^3.4.3" + } + }, "mississippi": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz", @@ -10225,6 +10403,16 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "pretender": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.3.tgz", + "integrity": "sha512-AlbkBly9R8KR+R0sTCJ/ToOeEoUMtt52QVCetui5zoSmeLOU3S8oobFsyPLm1O2txR6t58qDNysqPnA1vVi8Hg==", + "dev": true, + "requires": { + "fake-xml-http-request": "^2.1.1", + "route-recognizer": "^0.3.3" + } + }, "prettier": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz", @@ -10895,6 +11083,12 @@ "inherits": "^2.0.1" } }, + "route-recognizer": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz", + "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==", + "dev": true + }, "run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", diff --git a/package.json b/package.json index 347709a..3018598 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "eslint-plugin-prettier": "^3.1.4", "husky": "^4.3.0", "lint-staged": "^10.4.0", + "miragejs": "^0.1.41", "prettier": "^2.1.2" } } diff --git a/plugins/axios.js b/plugins/axios.js new file mode 100644 index 0000000..e720ef3 --- /dev/null +++ b/plugins/axios.js @@ -0,0 +1,16 @@ +export default function ({ $axios }, inject) { + // Create a custom axios instance + const api = $axios.create({ + headers: { + common: { + Accept: 'text/plain, */*', + }, + }, + }) + + // Set baseURL to something different + api.setBaseURL(process.env.baseApiUrl) + + // Inject to context as $api + inject('api', api) +} diff --git a/plugins/mirage.js b/plugins/mirage.js new file mode 100644 index 0000000..9618460 --- /dev/null +++ b/plugins/mirage.js @@ -0,0 +1,23 @@ +import { createServer } from 'miragejs' + +if (process.env.NODE_ENV === 'development') { + startServer(0) +} + +function startServer() { + createServer({ + routes() { + this.namespace = 'api' + + this.get('/movies', () => { + return { + movies: [ + { id: 1, name: 'Inception', year: 2010 }, + { id: 2, name: 'Interstellar', year: 2014 }, + { id: 3, name: 'Dunkirk', year: 2017 }, + ], + } + }) + }, + }) +}