├── dist
    └── .gitkeep
├── assets
    └── data
    │   └── foo.json
├── favicon.ico
├── src
    ├── services
    │   ├── profileService.js
    │   ├── authService
    │   │   ├── vuex
    │   │   │   └── auth
    │   │   │   │   ├── getters.js
    │   │   │   │   └── index.js
    │   │   └── index.js
    │   └── notificationService.js
    ├── vuex
    │   ├── api
    │   │   ├── getters.js
    │   │   └── index.js
    │   ├── notification
    │   │   ├── getters.js
    │   │   └── index.js
    │   └── store.js
    ├── content
    │   ├── default
    │   │   ├── NotFound.vue
    │   │   ├── About.vue
    │   │   └── Main.vue
    │   └── auth
    │   │   ├── Logout.vue
    │   │   ├── Login.vue
    │   │   └── Login.view.html
    ├── main.js
    ├── router
    │   ├── routes.js
    │   ├── paths.js
    │   └── config.js
    ├── App.vue
    └── components
    │   └── navbar.vue
├── .gitignore
├── .babelrc
├── index.html
├── package.json
└── README.md


/dist/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/assets/data/foo.json:
--------------------------------------------------------------------------------
1 | { 
2 |   "msg": "a foo message"
3 | }


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jjcodes78/vue-vuex-auth/HEAD/favicon.ico


--------------------------------------------------------------------------------
/src/services/profileService.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Created by squad on 17/07/16.
3 |  */
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/build.js
4 | npm-debug.log
5 | /.idea
6 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"]
4 | }
5 | 


--------------------------------------------------------------------------------
/src/vuex/api/getters.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 16/07/16.
 3 |  */
 4 | 
 5 | const status = function (state) {
 6 |   return state.api.status
 7 | }
 8 | 
 9 | export default {
10 |   status
11 | }


--------------------------------------------------------------------------------
/src/content/default/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     export default {
 3 |     }
 4 | </script>
 5 | 
 6 | <template>
 7 |     <div>
 8 |         <h3>Página não encontrada! (ERRO 404)</h3>
 9 |     </div>
10 | </template>


--------------------------------------------------------------------------------
/src/vuex/notification/getters.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 16/07/16.
 3 |  */
 4 | 
 5 | const show = function (state) {
 6 |   return state.notification.show
 7 | }
 8 | 
 9 | const options = function (state) {
10 |   return state.notification.options
11 | }
12 | 
13 | export default {
14 |   show,
15 |   options
16 | }


--------------------------------------------------------------------------------
/src/content/default/About.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export default {
 3 |     data () {
 4 |       return {
 5 |         msg: 'About Vue!'
 6 |       }
 7 |     }
 8 |   }
 9 | </script>
10 | 
11 | <template>
12 |   <div>
13 |     <h1>{{ msg }}</h1>
14 |     <small>Simple About Page :)</small>
15 |   </div>
16 | </template>
17 | 
18 | <style></style>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue/Vuex com JWT-Auth</title>
 6 |     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 7 |   </head>
 8 |   <body>
 9 |     <app></app>
10 |     <script src="dist/build.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/vuex/api/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 16/07/16.
 3 |  */
 4 | 
 5 | const SET_API_STATUS = 'SET_API_STATUS'
 6 | 
 7 | const state = {
 8 |   status: false
 9 | }
10 | 
11 | const mutations = {
12 |   [SET_API_STATUS] (state, status) {
13 |     state.status = status
14 |   }
15 | }
16 | 
17 | export default {
18 |   state,
19 |   mutations
20 | }


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'Vuex'
 3 | import api from './api'
 4 | import auth from '../services/authService/vuex/auth'
 5 | import notification from './notification'
 6 | 
 7 | Vue.use(Vuex)
 8 | 
 9 | export default new Vuex.Store({  
10 |     modules: {
11 |       api,
12 |       auth,
13 |       notification
14 |     }
15 |   })


--------------------------------------------------------------------------------
/src/content/default/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h3>Hello 4Vs (Vue, Vuex, VueRouter, VueResource)! \o/</h3>
 4 |         <p></p>
 5 |         <p>Aqui vai conter dados comuns de toda a aplicação... ou não!</p>
 6 |         <hr>
 7 |         <p>Um painel de administração, gráficos, tabelas, listas e demais informações.</p>
 8 | 
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |     export default {
14 | 
15 |     }
16 | </script>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue"
 2 | import VueResource from "vue-resource"
 3 | import VueRouter from "vue-router"
 4 | 
 5 | import App from "./App.vue"
 6 | import { routerConfig } from "./router/config"
 7 | import VueValidator from "vue-validator"
 8 | 
 9 | Vue.use(VueValidator)
10 | Vue.use(VueRouter)
11 | Vue.use(VueResource)
12 | 
13 | let router = new VueRouter()
14 | 
15 | //Configura o Router
16 | routerConfig(router)
17 | 
18 | //Inicia o Router
19 | router.start(App, "App")


--------------------------------------------------------------------------------
/src/vuex/notification/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 16/07/16.
 3 |  */
 4 | 
 5 | // Notificaçoes comuns
 6 | const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION'
 7 | const HIDE_NOTIFICATION = 'HIDE_NOTIFICATION'
 8 | 
 9 | const state = {
10 |   show: false,
11 |   options: {}
12 | }
13 | 
14 | const mutations = {
15 |   [HIDE_NOTIFICATION] (state) {
16 |       state.show = false
17 |   },
18 | 
19 |   [SHOW_NOTIFICATION] (state, notification) {
20 |     state.options = notification
21 |     state.show = true
22 |   }
23 | }
24 | 
25 | export default {
26 |   state,
27 |   mutations
28 | }


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 15/07/16.
 3 |  */
 4 | 
 5 | /**
 6 |  * Componentes das rotas
 7 |  */
 8 | import Main from '../content/default/Main.vue'
 9 | import Login from '../content/auth/Login.vue'
10 | import Logout from '../content/auth/Logout.vue'
11 | import About from '../content/default/About.vue'
12 | import * as path from './paths'
13 | 
14 | const routes = {
15 |   [path.HOME_URL]: {
16 |     component: Main,
17 |     auth: true
18 |   },
19 |   [path.LOGIN_URL]: {
20 |     component: Login,
21 |     guest: true
22 |   },
23 |   [path.LOGOUT_URL]: {
24 |     component: Logout,
25 |     auth: true
26 |   },
27 |   [path.ABOUT_URL]: {
28 |     component: About,
29 |     auth: true
30 |   }
31 | }
32 | 
33 | export default routes


--------------------------------------------------------------------------------
/src/services/authService/vuex/auth/getters.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 15/07/16.
 3 |  */
 4 | 
 5 | /**
 6 |  * obtém o valor do token do state
 7 |  * @param state
 8 |  * @returns {token|*|null}
 9 |  */
10 | const token = function (state) {
11 |     return state.auth.token
12 | }
13 | 
14 | /**
15 |  * obtém o valor de user do state
16 |  * @param state
17 |  * @returns {*}
18 |  */
19 | const user = function (state) {
20 |     return state.auth.user
21 | }
22 | 
23 | /**
24 |  * obtem o valor authenticated, se há um usuário logado
25 |  * @param state
26 |  * @returns {authenticated|*|boolean}
27 |  */
28 | const authenticated = function (state) {
29 |   return state.auth.authenticated
30 | }
31 | 
32 | export default {
33 |   token,
34 |   user,
35 |   authenticated
36 | }


--------------------------------------------------------------------------------
/src/router/paths.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 16/07/16.
 3 |  */
 4 | 
 5 | /*
 6 |  API SERVICES URLs
 7 |  */
 8 | export const API_BASE_URL = 'http://localhost:8000/api/v1'
 9 | export const API_AUTH_URL = API_BASE_URL + '/auth'
10 | export const API_LOGOUT_URL = API_AUTH_URL + '/logout'
11 | export const API_USER_PROFILE_URL = API_BASE_URL + '/auth/profile'
12 | 
13 | /*
14 |   APPLICATION ROUTES URLs
15 |  */
16 | export const HOME_URL = '/'
17 | export const LOGIN_URL = '/auth/login'
18 | export const LOGOUT_URL = '/auth/logout'
19 | export const ABOUT_URL = '/about'
20 | 
21 | // Navbar component links
22 | export const links = [
23 |   { title: 'Home', icon: 'glyphicon glyphicon-home', path: HOME_URL },
24 |   { title: 'About', icon: 'glyphicon glyphicon-info-sign', path: ABOUT_URL}
25 | ]


--------------------------------------------------------------------------------
/src/services/authService/vuex/auth/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 15/07/16.
 3 |  */
 4 | 
 5 | const SET_USER = 'SET_USER'
 6 | const REMOVE_USER = 'REMOVE_USER'
 7 | const SET_TOKEN = 'SET_TOKEN'
 8 | const REMOVE_TOKEN = 'REMOVE_TOKEN'
 9 | 
10 | const state = {
11 |   token: null,
12 |   user: {},
13 |   authenticated: false
14 | }
15 | 
16 | const mutations = {
17 |   [SET_USER] (state, user) {
18 |     state.user = user
19 |     state.authenticated = true
20 |   },
21 | 
22 |   [REMOVE_USER] (state) {
23 |     state.user = {}
24 |     state.authenticated = false
25 |   },
26 | 
27 |   [SET_TOKEN] (state, token) {
28 |     state.token = token
29 |   },
30 | 
31 |   [REMOVE_TOKEN] (state) {
32 |     state.token = null
33 |   }
34 | }
35 | 
36 | export default {
37 |   state,
38 |   mutations
39 | }


--------------------------------------------------------------------------------
/src/content/auth/Logout.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import notificationService from '../../services/notificationService'
 3 |   import authService from '../../services/authService'
 4 |   import { HOME_URL, LOGIN_URL } from '../../router/paths'
 5 | 
 6 |   export default {
 7 | 
 8 |     route: {
 9 |       activate (transition) {
10 | 
11 |         return authService.logout().then(function () {
12 |           authService.remove()
13 |           notificationService.show(notificationService.USER_LOGGED_OUT)
14 |           transition.redirect(LOGIN_URL)
15 |         }).catch(function (res) {
16 |           if ( res.status == 500 ) {
17 |             notificationService.show(notificationService.CONNECTION_ERROR)
18 |           }
19 |           transition.redirect(transition.from.path)
20 |         })
21 | 
22 |       }
23 |     }
24 |   }
25 | </script>
26 | 
27 | <template>
28 |   <div></div>
29 | </template>
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-vuex-auth",
 3 |   "version": "0.0.1",
 4 |   "description": "Esqueleto base para uma aplicação web com sistema de autenticação via JWT-Auth",
 5 |   "author": "jjsquad <jorge.techinfo@gmail.com>",
 6 |   "scripts": {
 7 |     "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
 8 |     "serve": "http-server -c 1 -a localhost",
 9 |     "dev": "npm-run-all --parallel watchify serve",
10 |     "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
11 |   },
12 |   "dependencies": {
13 |     "bootstrap": "^3.3.6",
14 |     "vue": "^1.0.0",
15 |     "vue-resource": "^0.9.3",
16 |     "vue-router": "^0.7.13",
17 |     "vue-strap": "^1.0.11",
18 |     "vue-validator": "^2.1.3",
19 |     "vuex": "^1.0.0-rc"
20 |   },
21 |   "devDependencies": {
22 |     "babel-core": "^6.0.0",
23 |     "babel-plugin-transform-runtime": "^6.0.0",
24 |     "babel-preset-es2015": "^6.0.0",
25 |     "babel-preset-stage-2": "^6.0.0",
26 |     "babel-runtime": "^6.0.0",
27 |     "babelify": "^7.2.0",
28 |     "browserify": "^12.0.1",
29 |     "browserify-hmr": "^0.3.1",
30 |     "cross-env": "^1.0.6",
31 |     "http-server": "^0.9.0",
32 |     "jsonwebtoken": "^7.1.6",
33 |     "npm-run-all": "^1.6.0",
34 |     "uglify-js": "^2.5.0",
35 |     "vueify": "^8.5.2",
36 |     "watchify": "^3.4.0"
37 |   },
38 |   "browserify": {
39 |     "transform": [
40 |       "vueify",
41 |       "babelify"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/router/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Configura o Router:
 3 |  * - define as rotas e os componentes
 4 |  * - cria a rota padrão de redirecionamento
 5 |  * - e monitora a cada transição se há um usuário logado
 6 |  */
 7 | import routes from './routes'
 8 | import authService from '../services/authService'
 9 | import { HOME_URL, LOGIN_URL } from './paths'
10 | 
11 | export function routerConfig(router) {
12 | 
13 |   router.map(routes)
14 | 
15 |   /**
16 |    * A cada transição é verificada se:
17 |    * - a rota precisa de autenticação para ser visitada
18 |    * - se há usuário logado
19 |    * - se há um token válido para refazer a autenticação
20 |    */
21 |   router.beforeEach(function (transition) {
22 | 
23 |     let token = null
24 | 
25 |     if (!authService.isLoggedIn()) {
26 |       token = localStorage.getItem('jwt-token')
27 |     }
28 | 
29 |     if (transition.to.auth && token !== null && !authService.isLoggedIn()) {
30 | 
31 |       authService.setToken(token)
32 |       return authService.getUserProfile()
33 |         .then(function (res) {
34 |           authService.setUser(res.data.user)
35 |           transition.next()
36 |         }).catch(function () {
37 |           authService.remove()
38 |           transition.redirect(LOGIN_URL)
39 |         })
40 |     } else if (transition.to.auth && !authService.isLoggedIn()) {
41 | 
42 |       transition.redirect(LOGIN_URL)
43 | 
44 |     } else if (transition.to.guest && authService.isLoggedIn()) {
45 | 
46 |       transition.redirect(transition.from.path)
47 | 
48 |     } else {
49 | 
50 |       transition.next()
51 | 
52 |     }
53 | 
54 |   })
55 | 
56 |   router.redirect({
57 |     '*': '/'
58 |   })
59 | 
60 | }


--------------------------------------------------------------------------------
/src/services/authService/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 16/07/16.
 3 |  */
 4 | import Vue from 'vue'
 5 | import VueResource from 'vue-resource'
 6 | import store from '../../vuex/store'
 7 | import authenticated from './vuex/auth/getters'
 8 | import { API_AUTH_URL, API_LOGOUT_URL, API_USER_PROFILE_URL } from '../../router/paths'
 9 | 
10 | Vue.use(VueResource)
11 | 
12 | /**
13 |  * Se o login for bem sucedido obtém-se o profile do usuário logado
14 |  * e retorna a Promise com o resultado
15 |  */
16 | const getUserProfile = function() {
17 |   return Vue.http({
18 |     url: API_USER_PROFILE_URL,
19 |     method: 'GET',
20 |     headers: {
21 |       Authorization: 'Bearer ' + localStorage.getItem('jwt-token'),
22 |       'Access-Control-Allow-Origin': '*' //TODO: remover CORS
23 |     }
24 |   })
25 | }
26 | 
27 | const login = function (body) {
28 |   return Vue.http({
29 |     url: API_AUTH_URL,
30 |     method: "POST",
31 |     body: body,
32 |     headers: {
33 |       'Access-Control-Allow-Origin': '*' //TODO: remover CORS
34 |     }
35 |   })
36 | }
37 | 
38 | const logout = function () {
39 |   return Vue.http({
40 |     url: API_LOGOUT_URL,
41 |     method: 'GET',
42 |     headers: {
43 |       Authorization: 'Bearer ' + localStorage.getItem('jwt-token')
44 |     }
45 |   })
46 | }
47 | 
48 | const setToken = function (token) {
49 |   localStorage.setItem('jwt-token', token)
50 |   store.dispatch('SET_TOKEN', token)
51 | }
52 | 
53 | const setUser = function (user) {
54 |   store.dispatch('SET_USER', user)
55 | }
56 | 
57 | const set = function (type, value) {
58 |   switch (type) {
59 |     case 'token':
60 |       setToken(value)
61 |       break
62 |     case 'user':
63 |       setUser(value)
64 |       break
65 |   }
66 | }
67 | 
68 | const remove = function () {
69 |   localStorage.removeItem('jwt-token')
70 |   store.dispatch('REMOVE_TOKEN')
71 |   store.dispatch('REMOVE_USER')
72 | }
73 | 
74 | const getToken = function () {
75 |   return store.state.auth.token
76 | }
77 | 
78 | const getUser = function () {
79 |   return store.state.auth.user
80 | }
81 | 
82 | const isLoggedIn = function () {
83 |   return store.state.auth.authenticated
84 | }
85 | 
86 | export default {
87 |   getUserProfile,
88 |   login,
89 |   logout,
90 |   set,
91 |   remove,
92 |   isLoggedIn,
93 |   setToken,
94 |   setUser,
95 |   getToken,
96 |   getUser
97 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 |     import store from './vuex/store'
 4 |     import notificationGetters from './vuex/notification/getters'
 5 |     import navbar from './components/navbar.vue'
 6 |     import alert from 'vue-strap/src/Alert.vue'
 7 | 
 8 |     import notificationService from './services/notificationService'
 9 |     import authService from './services/authService'
10 | 
11 |     import { HOME_URL, LOGIN_URL } from './router/paths'
12 | 
13 |     export default {
14 | 
15 |         store,
16 | 
17 |         vuex: {
18 |             getters: {
19 |                 show: notificationGetters.show,
20 |                 notificationOptions: notificationGetters.options
21 |             }
22 |         },
23 | 
24 |         components: {
25 |             navbar,
26 |             alert
27 |         },
28 | 
29 |         data () {
30 |             return {
31 |                 notificationVisible: false
32 |             }
33 |         },
34 | 
35 |         watch: {
36 |             show (val) {
37 |                 this.notificationVisible = val
38 |             },
39 | 
40 |             notificationVisible (val) {
41 |                 if(!val) {
42 |                     notificationService.hide()
43 |                 }
44 |             }
45 |         },
46 | 
47 |         computed: {
48 |             isLogged () {
49 |                 return authService.isLoggedIn()
50 |             },
51 |             user () {
52 |                 return authService.getUser()
53 |             }
54 |         }
55 |     }
56 | </script>
57 | 
58 | <template>
59 |     <div id="app">
60 |         <alert name="apiErrorAlert"
61 |                :show.sync="notificationVisible"
62 |                :duration="notificationOptions.duration || 3000"
63 |                :type="notificationOptions.type || 'success' "
64 |                width="400px"
65 |                placement="top-right"
66 |                dismissable
67 |         >
68 |             <i :class="notificationOptions.icon"></i>
69 |             <strong>{{ notificationOptions.title }}</strong>
70 |             <p>{{ notificationOptions.message }}</p>
71 |             <small><em>{{ notificationOptions.description }}</em></small>
72 |         </alert>
73 |         <navbar :visible="isLogged" :user="user"></navbar>
74 |         <div class="container">
75 |             <router-view></router-view>
76 |         </div>
77 |     </div>
78 | </template>


--------------------------------------------------------------------------------
/src/services/notificationService.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by squad on 18/07/16.
 3 |  */
 4 | 
 5 | import store from '../vuex/store'
 6 | 
 7 | const CONNECTION_ERROR = {
 8 |   duration: 5000,
 9 |   type: 'danger',
10 |   title: 'Oops! Erro',
11 |   message: 'Verifique a conexão e tente novamente.',
12 |   description: 'Não foi possível estabelecer uma conexão com o serviço. (ERR_CONNECTION_REFUSED)',
13 |   icon: 'glyphicon glyphicon-remove-sign'
14 | }
15 | 
16 | const INTERNAL_SERVER_ERROR = {
17 |   duration: 5000,
18 |   type: 'danger',
19 |   title: 'Oops! Erro',
20 |   message: 'Erro interno do servidor.',
21 |   description: 'Não foi possível estabelecer uma conexão com o serviço. (INTERNAL_SERVER_ERROR)',
22 |   icon: 'glyphicon glyphicon-remove-sign'
23 | }
24 | 
25 | // Notificações de login
26 | const USER_LOGGED_IN = {
27 |   duration: 3000,
28 |   type: 'success',
29 |   title: 'OK!',
30 |   message: 'Login efetuado com sucesso!',
31 |   icon: 'glyphicon glyphicon-ok-sign'
32 | }
33 | 
34 | const USER_LOGGED_OUT = {
35 |   duration: 3000,
36 |   type: 'success',
37 |   title: 'OK!',
38 |   message: 'Logout efetuado com sucesso!',
39 |   description: 'Faça login novamente para voltar a utilizar a aplicação.',
40 |   icon: 'glyphicon glyphicon-ok-sign'
41 | }
42 | 
43 | const INVALID_TOKEN = {
44 |   duration: 5000,
45 |   type: 'danger',
46 |   title: 'Oops! Erro',
47 |   message: 'E-mail e/ou senha inválidos.',
48 |   description: 'Contate o administrador do sistema. (UNAUTHORIZED)',
49 |   icon: 'glyphicon glyphicon-remove-sign'
50 | }
51 | 
52 | const USER_UNAUTHORIZED = {
53 |   duration: 5000,
54 |   type: 'danger',
55 |   title: 'Oops! Erro',
56 |   message: 'Token de acesso inválido.',
57 |   description: 'Efetue login novamente ou contate o administrador do sistema. (INVALID_TOKEN)',
58 |   icon: 'glyphicon glyphicon-remove-sign'
59 | }
60 | 
61 | const ACCESS_FORBIDDEN = 'ACCESS_FORBIDDEN'             // status 403
62 | const NOT_FOUND = 'NOT_FOUND'                           // status 404
63 | 
64 | const show = function (options) {
65 |   store.dispatch('SHOW_NOTIFICATION', options)
66 | }
67 | const hide = function () {
68 |   store.dispatch('HIDE_NOTIFICATION')
69 | }
70 | 
71 | export default {
72 |   show,
73 |   hide,
74 |   CONNECTION_ERROR,
75 |   INTERNAL_SERVER_ERROR,
76 |   USER_LOGGED_IN,
77 |   USER_LOGGED_OUT,
78 |   INVALID_TOKEN,
79 |   USER_UNAUTHORIZED
80 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue/VueResource/VueRouter/Vuex (4Vs) JWT-Auth
 2 | 
 3 | > Esqueleto base para uma aplicação web com sistema de autenticação via JWT incluído
 4 | 
 5 | > *Skeleton basis for a web application with authentication system via JWT included*
 6 | 
 7 | ## Instalação *(Setup)*
 8 | 
 9 | ``` bash
10 | # install dependencies
11 | npm install
12 | 
13 | # serve with hot reload at localhost:8080
14 | npm run dev
15 | 
16 | # build for production with minification
17 | npm run build
18 | ```
19 | 
20 | ## O que está incluso? *(What is included?)*
21 | 
22 | * Vue
23 | * Vue-Router
24 | * Vue-Resource
25 | * Vuex
26 | * Vue-Validator
27 | * Vue-Strap
28 | * Bootstrap 3.3.6
29 | 
30 | ## Estrutura da Aplicação *(Application Structure)*
31 | 
32 | * /(root)
33 |     * /assets - pasta de imagens e outros arquivos externos para a aplicação
34 |     * /dist - o build final ficará aqui
35 |     * /src - o código-fonte da aplicação
36 |         * /content
37 |             * /auth - componentes para autenticação
38 |             * /default - componentes base/comuns
39 |         * /router
40 |             * config.js - configura o Vue-Router
41 |             * paths.js - lista das URLs
42 |             * routes.js - rotas da aplicação
43 |         * /services
44 |             * authService.js -
45 |         * /vuex (1)
46 |             * /api - módulo de api para o vuex
47 |             * /auth - módulo de autenticação
48 |             * /notification - módulo de notificações
49 |             * store.js - Vuex store
50 |         * App.vue - componente raiz da aplicação
51 |         * main.js - ponto de entrada da aplicação
52 |     * index.html - container HTML da aplicação
53 | 
54 | (1) - os módulos Vuex criam cada um seus respectivos *state* e *mutations*, bem como seus *getters* e *actions*.
55 | 
56 | ## ToDo:
57 | 
58 | ```
59 |  - melhorar este readme
60 |  - documentar o processo de autenticação usando JWT
61 |  - exemplos de como criar novos módulos
62 |  - muito mais!
63 | 
64 | ```
65 | 
66 | Cya! Jorge ***jjsquad*** Junior \o/
67 | 
68 | ### Links:
69 | 
70 | - [Vue.js](http://vuejs.org)
71 | - [Vue-Resource](https://github.com/vuejs/vue-resource)
72 | - [Vue-Router](https://github.com/vuejs/vue-router)
73 | - [Vuex](https://github.com/vuejs/vuex)
74 | - [Vue-Validator](https://github.com/vuejs/vue-validator)
75 | - [Vue-Strap](http://yuche.github.io/vue-strap)
76 | - [Bootstrap](http://getbootstrap.com)
77 | 
78 | 
79 | For more information see the [docs for vueify](https://github.com/vuejs/vueify).
80 | 


--------------------------------------------------------------------------------
/src/content/auth/Login.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import notificationService from '../../services/notificationService'
 3 |     import authService from '../../services/authService'
 4 |     import { HOME_URL } from '../../router/paths'
 5 | 
 6 |     export default{
 7 | 
 8 |         components: {
 9 | 
10 |         },
11 | 
12 |         data () {
13 |             return {
14 |                 email: '',
15 |                 password: '',
16 |                 error: ''
17 |             }
18 |         },
19 | 
20 |         methods: {
21 |             /**
22 |              *  Verifica se o campo está com erro
23 |              *
24 |              * @param field
25 |              * @returns {*}
26 |              */
27 |             invalid (field) {
28 |                 return field.dirty && field.invalid
29 |             },
30 | 
31 |             /**
32 |              * Envia as informações de login para o servidor
33 |              */
34 |             submit() {
35 | 
36 |                 let formBody = {
37 |                     email: this.email,
38 |                     password: this.password
39 |                 }
40 | 
41 |                 authService.login(formBody).then(function (res) {
42 |                     let token = res.data.token
43 |                     if(token !== undefined ) {
44 |                         authService.set('token', token)
45 |                         authService.getUserProfile().then(function (res) {
46 |                             let user = res.data.user
47 |                             if( user !== null || user !== undefined) {
48 |                                 authService.set('user', user)
49 |                                 notificationService.show(notificationService.USER_LOGGED_IN)
50 |                                 this.$router.go(HOME_URL)
51 |                             }
52 |                         }.bind(this)).catch(function (res) {
53 |                             window.console.log('error', res);
54 |                             authService.remove()
55 |                         })
56 |                     }
57 |                 }.bind(this)).catch(function (res) {
58 |                     if( res.status == 401 ) {
59 |                         notificationService.show(notificationService.INVALID_TOKEN)
60 |                     }
61 |                     if( res.status == 0 ) {
62 |                         notificationService.show(notificationService.CONNECTION_ERROR)
63 |                     }
64 |                 }.bind(this))
65 |             }
66 |         }
67 |     }
68 | </script>
69 | 
70 | <template src="./Login.view.html"></template>


--------------------------------------------------------------------------------
/src/content/auth/Login.view.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <div class="col-md-4 col-md-offset-4">
 3 |         <div class="panel panel-primary">
 4 |             <div class="panel-heading">
 5 |                 <span class="panel-title">Login</span>
 6 |             </div>
 7 |             <div class="panel-body">
 8 |                 <!--<pre>{{ $login | json }}</pre>-->
 9 | 
10 |                 <div class="alert alert-danger" v-show="error != ''">
11 |                     <p>{{ error }}</p>
12 |                 </div>
13 | 
14 |                 <div class="row">
15 |                     <div class="col-md-12">
16 |                         <validator name="login">
17 |                             <form novalidate>
18 |                                 <div class="row">
19 |                                     <div class="col-md-12">
20 |                                         <div class="form-group has-feedback" :class="{ 'has-error': invalid($login.email) }">
21 |                                             <label for="email" class="input-control">E-Mail:</label>
22 |                                             <input type="text"
23 |                                                    name="email"
24 |                                                    class="form-control"
25 |                                                    v-model="email"
26 |                                                    v-validate:email="['required']" />
27 |                                             <i class="form-control-feedback glyphicon glyphicon-remove"
28 |                                                v-if="invalid($login.email)"></i>
29 |                                         </div>
30 |                                         <div class="form-group has-feedback" :class="{ 'has-error': invalid($login.password) }">
31 |                                             <label for="password" class="input-control">Senha:</label>
32 |                                             <input type="password"
33 |                                                    name="password"
34 |                                                    class="form-control"
35 |                                                    v-model="password"
36 |                                                    v-validate:password="{ required: true, minlength: 4 }" />
37 |                                             <i class="form-control-feedback glyphicon glyphicon-remove"
38 |                                                v-if="invalid($login.password)"></i>
39 |                                         </div>
40 |                                     </div>
41 |                                 </div>
42 |                                 <div class="row">
43 |                                     <div class="col-md-4">
44 |                                         <button @click.prevent="submit" class="btn btn-primary btn-block" type="submit" :disabled="!$login.valid">
45 |                                             <i class="glyphicon glyphicon-user"></i>
46 |                                             Login
47 |                                         </button>
48 |                                     </div>
49 |                                 </div>
50 |                             </form>
51 |                         </validator>
52 |                     </div>
53 |                 </div>
54 |             </div>
55 |         </div>
56 |     </div>
57 | </div>


--------------------------------------------------------------------------------
/src/components/navbar.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import sidebar from 'vue-strap/src/Aside.vue'
 3 |   import { links, LOGOUT_URL } from '../router/paths'
 4 | 
 5 |   export default {
 6 | 
 7 |     props: ['visible', 'user'],
 8 | 
 9 |     components: {
10 |       sidebar
11 |     },
12 | 
13 |     data () {
14 |       return {
15 |         showProfile: false,
16 |         links
17 |       }
18 |     },
19 | 
20 |     computed: {
21 |       profileAvatar () {
22 |         return this.user.avatar_url || 'https://avatars2.githubusercontent.com/u/12722517?v=3&u=18bf882b10e7cde77ce61d35e03e9e01e4c0f151&s=140'
23 |       },
24 | 
25 |       logoutPath () {
26 |         return {
27 |           path: LOGOUT_URL
28 |         }
29 |       }
30 |     }
31 |   }
32 | </script>
33 | 
34 | <template>
35 |   <div>
36 |     <nav class="navbar navbar-default">
37 |       <div class="navbar-header">
38 |         <span class="navbar-brand">Vue/Vuex com JWT-Auth</span>
39 |       </div>
40 |       <template v-if="visible">
41 |         <sidebar :show.sync="showProfile" placement="right" header="Perfil" :width="500">
42 |           <div>
43 |             <div class="row well-sm">
44 |               <div class="col-md-3">
45 |                 <img :src="profileAvatar" width="64" height="64">
46 |               </div>
47 |               <div class="col-md-9">
48 |                 <span><strong>{{ user.name }}</strong></span>
49 |               </div>
50 |             </div>
51 |           </div>
52 |         </sidebar>
53 |         <div class="collapse navbar-collapse">
54 |           <ul class="nav navbar-nav navbar">
55 |             <li v-for="link in links" :class="{ 'active': $route.path == link.path }">
56 |               <template v-if="link.dropdown">
57 |                 <a href="#" @click="link.callback" class="navbar-link">
58 |                   <template v-if="link.image">
59 |                     <img :src="link.image.source" :class="link.image.class" :style="link.image.style">
60 |                   </template>
61 |                   <span>{{ user.name }}</span>
62 |                 </a>
63 |               </template>
64 |               <template v-else>
65 |                 <a href="#" v-link="{ path: link.path }" class="navbar-link">
66 |                   <template v-if="link.image">
67 |                     <img :src="link.image.source" :class="link.image.class" :style="link.image.style">
68 |                   </template>
69 |                   <template v-if="link.icon">
70 |                     <i :class="link.icon"></i>
71 |                   </template>
72 |                   <span>{{ link.title }}</span>
73 |                 </a>
74 |               </template>
75 |             </li>
76 |           </ul>
77 |           <ul class="nav navbar-nav navbar-right">
78 |             <li>
79 |               <img :src="profileAvatar" class="img-circle" style="max-height:48px;width:auto;vertical-align:middle;">
80 |             </li>
81 |             <li>
82 |               <a href="#" class="navbar-link" @click="showProfile = true">
83 |                 {{ user.name }}
84 |               </a>
85 |             </li>
86 |             <li>
87 |               <a href="#" v-link="logoutPath" class="navbar-link">
88 |                 <i class="glyphicon glyphicon-log-out"></i>
89 |                 <span>Sair</span>
90 |               </a>
91 |             </li>
92 |           </ul>
93 |         </div>
94 |       </template>
95 |     </nav>
96 |   </div>
97 | </template>


--------------------------------------------------------------------------------