├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── favicon.ico
└── index.html
└── src
├── App.vue
├── assets
└── logo.png
├── components
└── HelloWorld.vue
├── main.js
├── router.js
├── store.js
├── views
├── About.vue
├── Home.vue
├── Login.vue
└── Protected.vue
└── vue-apollo.js
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true
5 | },
6 | 'extends': [
7 | 'plugin:vue/essential',
8 | 'eslint:recommended'
9 | ],
10 | rules: {
11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 | },
14 | parserOptions: {
15 | parser: 'babel-eslint'
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-apollo-auth-example
2 |
3 | ## Project setup
4 | ```
5 | npm install
6 | ```
7 |
8 | ### Compiles and hot-reloads for development
9 | ```
10 | npm run serve
11 | ```
12 |
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 |
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 |
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 |
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-apollo-auth-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "vue": "^2.5.22",
12 | "vue-apollo": "^3.0.0-beta.11",
13 | "vue-router": "^3.0.1",
14 | "vuex": "^3.0.1"
15 | },
16 | "devDependencies": {
17 | "@vue/cli-plugin-babel": "^3.4.0",
18 | "@vue/cli-plugin-eslint": "^3.4.0",
19 | "@vue/cli-service": "^3.4.0",
20 | "babel-eslint": "^10.0.1",
21 | "eslint": "^5.8.0",
22 | "eslint-plugin-vue": "^5.0.0",
23 | "graphql-tag": "^2.9.0",
24 | "vue-cli-plugin-apollo": "^0.19.1",
25 | "vue-template-compiler": "^2.5.21"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | autoprefixer: {}
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/vue-apollo-auth-example/34a8f2365d7db02666565b36f715b8367edffccc/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | vue-apollo-auth-example
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Home |
5 |
About |
6 |
Login |
7 |
Logout
8 |
9 |
10 |
11 |
12 |
13 |
25 |
26 |
27 |
48 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/vue-apollo-auth-example/34a8f2365d7db02666565b36f715b8367edffccc/src/assets/logo.png
--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
9 |
Installed CLI Plugins
10 |
14 |
Essential Links
15 |
22 |
Ecosystem
23 |
30 |
31 |
32 |
33 |
58 |
59 |
60 |
76 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 | import { createProvider } from './vue-apollo'
6 |
7 | Vue.config.productionTip = false
8 |
9 | new Vue({
10 | router,
11 | store,
12 | apolloProvider: createProvider(),
13 | render: h => h(App)
14 | }).$mount('#app')
15 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import Home from './views/Home.vue'
4 |
5 | Vue.use(Router)
6 |
7 | export default new Router({
8 | mode: 'history',
9 | base: process.env.BASE_URL,
10 | routes: [
11 | {
12 | path: '/',
13 | name: 'home',
14 | component: Home
15 | },
16 | {
17 | path: '/about',
18 | name: 'about',
19 | // route level code-splitting
20 | // this generates a separate chunk (about.[hash].js) for this route
21 | // which is lazy-loaded when the route is visited.
22 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
23 | },
24 | {
25 | path: '/login',
26 | name: 'login',
27 | component: () => import(/* webpackChunkName: "about" */ './views/Login.vue')
28 | },
29 | {
30 | path: '/protected',
31 | name: 'protected',
32 | component: () => import(/* webpackChunkName: "about" */ './views/Protected.vue')
33 | }
34 | ]
35 | })
36 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 |
4 | Vue.use(Vuex)
5 |
6 | export default new Vuex.Store({
7 | state: {
8 |
9 | },
10 | mutations: {
11 |
12 | },
13 | actions: {
14 |
15 | }
16 | })
17 |
--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
This is an about page
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |

4 |
5 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
1 |
2 |
17 |
18 |
19 |
62 |
63 |
78 |
--------------------------------------------------------------------------------
/src/views/Protected.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
User's Info
4 |
5 |
{{ me.id }}
6 |
{{ me.name }}
7 |
{{ me.email }}
8 |
9 |
10 |
11 |
12 |
33 |
34 |
--------------------------------------------------------------------------------
/src/vue-apollo.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueApollo from 'vue-apollo'
3 | import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
4 |
5 | // Install the vue plugin
6 | Vue.use(VueApollo)
7 |
8 | // Name of the localStorage item
9 | const AUTH_TOKEN = 'apollo-token'
10 |
11 | // Http endpoint
12 | const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://lighthouse-tutorial.test/graphql'
13 |
14 | // Config
15 | const defaultOptions = {
16 | // You can use `https` for secure connection (recommended in production)
17 | httpEndpoint,
18 | // You can use `wss` for secure connection (recommended in production)
19 | // Use `null` to disable subscriptions
20 | // wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',
21 | wsEndpoint: null,
22 | // LocalStorage token
23 | tokenName: AUTH_TOKEN,
24 | // Enable Automatic Query persisting with Apollo Engine
25 | persisting: false,
26 | // Use websockets for everything (no HTTP)
27 | // You need to pass a `wsEndpoint` for this to work
28 | websocketsOnly: false,
29 | // Is being rendered on the server?
30 | ssr: false,
31 |
32 | // Override default apollo link
33 | // note: don't override httpLink here, specify httpLink options in the
34 | // httpLinkOptions property of defaultOptions.
35 | // link: myLink
36 |
37 | // Override default cache
38 | // cache: myCache
39 |
40 | // Override the way the Authorization header is set
41 | // getAuth: (tokenName) => ...
42 |
43 | // Additional ApolloClient options
44 | // apollo: { ... }
45 |
46 | // Client local data (see apollo-link-state)
47 | // clientState: { resolvers: { ... }, defaults: { ... } }
48 | }
49 |
50 | // Call this in the Vue app file
51 | export function createProvider (options = {}) {
52 | // Create apollo client
53 | const { apolloClient, wsClient } = createApolloClient({
54 | ...defaultOptions,
55 | ...options,
56 | })
57 | apolloClient.wsClient = wsClient
58 |
59 | // Create vue apollo provider
60 | const apolloProvider = new VueApollo({
61 | defaultClient: apolloClient,
62 | defaultOptions: {
63 | $query: {
64 | // fetchPolicy: 'cache-and-network',
65 | },
66 | },
67 | errorHandler (error) {
68 | // eslint-disable-next-line no-console
69 | console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
70 | },
71 | })
72 |
73 | return apolloProvider
74 | }
75 |
76 | // Manually call this when user log in
77 | export async function onLogin (apolloClient, token) {
78 | if (typeof localStorage !== 'undefined' && token) {
79 | localStorage.setItem(AUTH_TOKEN, token)
80 | }
81 | if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
82 | try {
83 | await apolloClient.resetStore()
84 | } catch (e) {
85 | // eslint-disable-next-line no-console
86 | console.log('%cError on cache reset (login)', 'color: orange;', e.message)
87 | }
88 | }
89 |
90 | // Manually call this when user log out
91 | export async function onLogout (apolloClient) {
92 | if (typeof localStorage !== 'undefined') {
93 | localStorage.removeItem(AUTH_TOKEN)
94 | }
95 | if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
96 | try {
97 | await apolloClient.resetStore()
98 | } catch (e) {
99 | // eslint-disable-next-line no-console
100 | console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
101 | }
102 | }
103 |
--------------------------------------------------------------------------------