├── vue.config.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── models
    │   └── user.js
    ├── store
    │   ├── index.js
    │   └── auth.module.js
    ├── services
    │   ├── api.js
    │   ├── user.service.js
    │   ├── auth.service.js
    │   ├── token.service.js
    │   └── setupInterceptors.js
    ├── common
    │   └── EventBus.js
    ├── views
    │   ├── Home.vue
    │   ├── BoardAdmin.vue
    │   ├── BoardUser.vue
    │   ├── BoardModerator.vue
    │   ├── Profile.vue
    │   ├── Login.vue
    │   └── Register.vue
    ├── main.js
    ├── router.js
    └── App.vue
├── vue-refresh-token-axios-jwt-example-flow.png
├── .gitignore
├── package.json
└── README.md


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     port: 8081
4 |   }
5 | }


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-axios-refresh-token/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-axios-refresh-token/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-refresh-token-axios-jwt-example-flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/vue-axios-refresh-token/HEAD/vue-refresh-token-axios-jwt-example-flow.png


--------------------------------------------------------------------------------
/src/models/user.js:
--------------------------------------------------------------------------------
1 | export default class User {
2 |   constructor(username, email, password) {
3 |     this.username = username;
4 |     this.email = email;
5 |     this.password = password;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | import { auth } from './auth.module';
 5 | 
 6 | Vue.use(Vuex);
 7 | 
 8 | export default new Vuex.Store({
 9 |   modules: {
10 |     auth
11 |   }
12 | });
13 | 


--------------------------------------------------------------------------------
/src/services/api.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | const instance = axios.create({
 4 |   baseURL: "http://localhost:8080/api",
 5 |   headers: {
 6 |     "Content-Type": "application/json",
 7 |   },
 8 | });
 9 | 
10 | export default instance;
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/common/EventBus.js:
--------------------------------------------------------------------------------
 1 | const eventBus = {
 2 |   on(event, callback) {
 3 |     document.addEventListener(event, (e) => callback(e.detail));
 4 |   },
 5 |   dispatch(event, data) {
 6 |     document.dispatchEvent(new CustomEvent(event, { detail: data }));
 7 |   },
 8 |   remove(event, callback) {
 9 |     document.removeEventListener(event, callback);
10 |   },
11 | };
12 | 
13 | export default eventBus;
14 | 


--------------------------------------------------------------------------------
/src/services/user.service.js:
--------------------------------------------------------------------------------
 1 | import api from './api';
 2 | 
 3 | class UserService {
 4 |   getPublicContent() {
 5 |     return api.get('/test/all');
 6 |   }
 7 | 
 8 |   getUserBoard() {
 9 |     return api.get('/test/user');
10 |   }
11 | 
12 |   getModeratorBoard() {
13 |     return api.get('/test/mod');
14 |   }
15 | 
16 |   getAdminBoard() {
17 |     return api.get('/test/admin');
18 |   }
19 | }
20 | 
21 | export default new UserService();
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Vue Refresh Token with Axios example</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but Vue Refresh Token with Axios example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <header class="jumbotron">
 4 |       <h3>{{content}}</h3>
 5 |     </header>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import UserService from '../services/user.service';
11 | 
12 | export default {
13 |   name: 'Home',
14 |   data() {
15 |     return {
16 |       content: ''
17 |     };
18 |   },
19 |   mounted() {
20 |     UserService.getPublicContent().then(
21 |       response => {
22 |         this.content = response.data;
23 |       },
24 |       error => {
25 |         this.content =
26 |           (error.response && error.response.data && error.response.data.message) ||
27 |           error.message ||
28 |           error.toString();
29 |       }
30 |     );
31 |   }
32 | };
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/services/auth.service.js:
--------------------------------------------------------------------------------
 1 | import api from "./api";
 2 | import TokenService from "./token.service";
 3 | 
 4 | class AuthService {
 5 |   login({ username, password }) {
 6 |     return api
 7 |       .post("/auth/signin", {
 8 |         username,
 9 |         password
10 |       })
11 |       .then((response) => {
12 |         if (response.data.accessToken) {
13 |           TokenService.setUser(response.data);
14 |         }
15 | 
16 |         return response.data;
17 |       });
18 |   }
19 | 
20 |   logout() {
21 |     TokenService.removeUser();
22 |   }
23 | 
24 |   register({ username, email, password }) {
25 |     return api.post("/auth/signup", {
26 |       username,
27 |       email,
28 |       password
29 |     });
30 |   }
31 | }
32 | 
33 | export default new AuthService();
34 | 


--------------------------------------------------------------------------------
/src/services/token.service.js:
--------------------------------------------------------------------------------
 1 | class TokenService {
 2 |   getLocalRefreshToken() {
 3 |     const user = JSON.parse(localStorage.getItem("user"));
 4 |     return user?.refreshToken;
 5 |   }
 6 | 
 7 |   getLocalAccessToken() {
 8 |     const user = JSON.parse(localStorage.getItem("user"));
 9 |     return user?.accessToken;
10 |   }
11 | 
12 |   updateLocalAccessToken(token) {
13 |     let user = JSON.parse(localStorage.getItem("user"));
14 |     user.accessToken = token;
15 |     localStorage.setItem("user", JSON.stringify(user));
16 |   }
17 | 
18 |   getUser() {
19 |     return JSON.parse(localStorage.getItem("user"));
20 |   }
21 | 
22 |   setUser(user) {
23 |     console.log(JSON.stringify(user));
24 |     localStorage.setItem("user", JSON.stringify(user));
25 |   }
26 | 
27 |   removeUser() {
28 |     localStorage.removeItem("user");
29 |   }
30 | }
31 | 
32 | export default new TokenService();
33 | 


--------------------------------------------------------------------------------
/src/views/BoardAdmin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <header class="jumbotron">
 4 |       <h3>{{content}}</h3>
 5 |     </header>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import UserService from '../services/user.service';
11 | import EventBus from "../common/EventBus";
12 | 
13 | export default {
14 |   name: 'Admin',
15 |   data() {
16 |     return {
17 |       content: ''
18 |     };
19 |   },
20 |   mounted() {
21 |     UserService.getAdminBoard().then(
22 |       response => {
23 |         this.content = response.data;
24 |       },
25 |       error => {
26 |         this.content =
27 |           (error.response && error.response.data && error.response.data.message) ||
28 |           error.message ||
29 |           error.toString();
30 | 
31 |         if (error.response && error.response.status === 403) {
32 |           EventBus.dispatch("logout");
33 |         }
34 |       }
35 |     );
36 |   }
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/views/BoardUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <header class="jumbotron">
 4 |       <h3>{{content}}</h3>
 5 |     </header>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import UserService from '../services/user.service';
11 | import EventBus from "../common/EventBus";
12 | 
13 | export default {
14 |   name: 'User',
15 |   data() {
16 |     return {
17 |       content: ''
18 |     };
19 |   },
20 |   mounted() {
21 |     UserService.getUserBoard().then(
22 |       response => {
23 |         this.content = response.data;
24 |       },
25 |       error => {
26 |         this.content =
27 |           (error.response && error.response.data && error.response.data.message) ||
28 |           error.message ||
29 |           error.toString();
30 | 
31 |         if (error.response && error.response.status === 403) {
32 |           EventBus.dispatch("logout");
33 |         }
34 |       }
35 |     );
36 |   }
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/views/BoardModerator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <header class="jumbotron">
 4 |       <h3>{{content}}</h3>
 5 |     </header>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import UserService from '../services/user.service';
11 | import EventBus from "../common/EventBus";
12 | 
13 | export default {
14 |   name: 'Moderator',
15 |   data() {
16 |     return {
17 |       content: ''
18 |     };
19 |   },
20 |   mounted() {
21 |     UserService.getModeratorBoard().then(
22 |       response => {
23 |         this.content = response.data;
24 |       },
25 |       error => {
26 |         this.content =
27 |           (error.response && error.response.data && error.response.data.message) ||
28 |           error.message ||
29 |           error.toString();
30 | 
31 |         if (error.response && error.response.status === 403) {
32 |           EventBus.dispatch("logout");
33 |         }
34 |       }
35 |     );
36 |   }
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/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 'bootstrap';
 6 | import 'bootstrap/dist/css/bootstrap.min.css';
 7 | import VeeValidate from 'vee-validate';
 8 | import Vuex from 'vuex';
 9 | import { library } from '@fortawesome/fontawesome-svg-core';
10 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
11 | import {
12 |   faHome,
13 |   faUser,
14 |   faUserPlus,
15 |   faSignInAlt,
16 |   faSignOutAlt
17 | } from '@fortawesome/free-solid-svg-icons';
18 | 
19 | import setupInterceptors from './services/setupInterceptors';
20 | 
21 | library.add(faHome, faUser, faUserPlus, faSignInAlt, faSignOutAlt);
22 | 
23 | Vue.config.productionTip = false;
24 | 
25 | Vue.use(VeeValidate);
26 | Vue.component('font-awesome-icon', FontAwesomeIcon);
27 | 
28 | Vue.use(Vuex);
29 | 
30 | setupInterceptors(store);
31 | 
32 | new Vue({
33 |   router,
34 |   store,
35 |   render: h => h(App)
36 | }).$mount('#app');
37 | 


--------------------------------------------------------------------------------
/src/views/Profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <header class="jumbotron">
 4 |       <h3>
 5 |         <strong>{{currentUser.username}}</strong> Profile
 6 |       </h3>
 7 |     </header>
 8 |     <p>
 9 |       <strong>Token:</strong>
10 |       {{currentUser.accessToken.substring(0, 20)}} ... {{currentUser.accessToken.substr(currentUser.accessToken.length - 20)}}
11 |     </p>
12 |     <p>
13 |       <strong>Id:</strong>
14 |       {{currentUser.id}}
15 |     </p>
16 |     <p>
17 |       <strong>Email:</strong>
18 |       {{currentUser.email}}
19 |     </p>
20 |     <strong>Authorities:</strong>
21 |     <ul>
22 |       <li v-for="(role,index) in currentUser.roles" :key="index">{{role}}</li>
23 |     </ul>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'Profile',
30 |   computed: {
31 |     currentUser() {
32 |       return this.$store.state.auth.user;
33 |     }
34 |   },
35 |   mounted() {
36 |     if (!this.currentUser) {
37 |       this.$router.push('/login');
38 |     }
39 |   }
40 | };
41 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-axios-refresh-token",
 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 |     "@fortawesome/fontawesome-svg-core": "^1.2.35",
12 |     "@fortawesome/free-solid-svg-icons": "^5.15.3",
13 |     "@fortawesome/vue-fontawesome": "^2.0.2",
14 |     "axios": "^0.21.1",
15 |     "bootstrap": "^4.6.0",
16 |     "core-js": "^3.6.5",
17 |     "jquery": "^3.6.0",
18 |     "popper.js": "^1.16.1",
19 |     "vee-validate": "^2.2.15",
20 |     "vue": "^2.6.11",
21 |     "vue-router": "^3.5.2",
22 |     "vuex": "^3.6.2"
23 |   },
24 |   "devDependencies": {
25 |     "@vue/cli-plugin-babel": "~4.5.0",
26 |     "@vue/cli-plugin-eslint": "~4.5.0",
27 |     "@vue/cli-plugin-router": "~4.5.0",
28 |     "@vue/cli-plugin-vuex": "~4.5.0",
29 |     "@vue/cli-service": "~4.5.0",
30 |     "babel-eslint": "^10.1.0",
31 |     "eslint": "^6.7.2",
32 |     "eslint-plugin-vue": "^6.2.2",
33 |     "vue-template-compiler": "^2.6.11"
34 |   },
35 |   "eslintConfig": {
36 |     "root": true,
37 |     "env": {
38 |       "node": true
39 |     },
40 |     "extends": [
41 |       "plugin:vue/essential",
42 |       "eslint:recommended"
43 |     ],
44 |     "parserOptions": {
45 |       "parser": "babel-eslint"
46 |     },
47 |     "rules": {}
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not dead"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/services/setupInterceptors.js:
--------------------------------------------------------------------------------
 1 | import axiosInstance from "./api";
 2 | import TokenService from "./token.service";
 3 | 
 4 | const setup = (store) => {
 5 |   axiosInstance.interceptors.request.use(
 6 |     (config) => {
 7 |       const token = TokenService.getLocalAccessToken();
 8 |       if (token) {
 9 |         // config.headers["Authorization"] = 'Bearer ' + token;  // for Spring Boot back-end
10 |         config.headers["x-access-token"] = token; // for Node.js Express back-end
11 |       }
12 |       return config;
13 |     },
14 |     (error) => {
15 |       return Promise.reject(error);
16 |     }
17 |   );
18 | 
19 |   axiosInstance.interceptors.response.use(
20 |     (res) => {
21 |       return res;
22 |     },
23 |     async (err) => {
24 |       const originalConfig = err.config;
25 | 
26 |       if (originalConfig.url !== "/auth/signin" && err.response) {
27 |         // Access Token was expired
28 |         if (err.response.status === 401 && !originalConfig._retry) {
29 |           originalConfig._retry = true;
30 | 
31 |           try {
32 |             const rs = await axiosInstance.post("/auth/refreshtoken", {
33 |               refreshToken: TokenService.getLocalRefreshToken(),
34 |             });
35 | 
36 |             const { accessToken } = rs.data;
37 | 
38 |             store.dispatch('auth/refreshToken', accessToken);
39 |             TokenService.updateLocalAccessToken(accessToken);
40 | 
41 |             return axiosInstance(originalConfig);
42 |           } catch (_error) {
43 |             return Promise.reject(_error);
44 |           }
45 |         }
46 |       }
47 | 
48 |       return Promise.reject(err);
49 |     }
50 |   );
51 | };
52 | 
53 | export default setup;


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Home from './views/Home.vue';
 4 | import Login from './views/Login.vue';
 5 | import Register from './views/Register.vue';
 6 | 
 7 | Vue.use(Router);
 8 | 
 9 | export const router = new Router({
10 |   mode: 'history',
11 |   routes: [
12 |     {
13 |       path: '/',
14 |       name: 'home',
15 |       component: Home
16 |     },
17 |     {
18 |       path: '/home',
19 |       component: Home
20 |     },
21 |     {
22 |       path: '/login',
23 |       component: Login
24 |     },
25 |     {
26 |       path: '/register',
27 |       component: Register
28 |     },
29 |     {
30 |       path: '/profile',
31 |       name: 'profile',
32 |       // lazy-loaded
33 |       component: () => import('./views/Profile.vue')
34 |     },
35 |     {
36 |       path: '/admin',
37 |       name: 'admin',
38 |       // lazy-loaded
39 |       component: () => import('./views/BoardAdmin.vue')
40 |     },
41 |     {
42 |       path: '/mod',
43 |       name: 'moderator',
44 |       // lazy-loaded
45 |       component: () => import('./views/BoardModerator.vue')
46 |     },
47 |     {
48 |       path: '/user',
49 |       name: 'user',
50 |       // lazy-loaded
51 |       component: () => import('./views/BoardUser.vue')
52 |     }
53 |   ]
54 | });
55 | 
56 | // router.beforeEach((to, from, next) => {
57 | //   const publicPages = ['/login', '/register', '/home'];
58 | //   const authRequired = !publicPages.includes(to.path);
59 | //   const loggedIn = localStorage.getItem('user');
60 | 
61 | //   // trying to access a restricted page + not logged in
62 | //   // redirect to login page
63 | //   if (authRequired && !loggedIn) {
64 | //     next('/login');
65 | //   } else {
66 | //     next();
67 | //   }
68 | // });
69 | 


--------------------------------------------------------------------------------
/src/store/auth.module.js:
--------------------------------------------------------------------------------
 1 | import AuthService from '../services/auth.service';
 2 | 
 3 | const user = JSON.parse(localStorage.getItem('user'));
 4 | const initialState = user
 5 |   ? { status: { loggedIn: true }, user }
 6 |   : { status: { loggedIn: false }, user: null };
 7 | 
 8 | export const auth = {
 9 |   namespaced: true,
10 |   state: initialState,
11 |   actions: {
12 |     login({ commit }, user) {
13 |       return AuthService.login(user).then(
14 |         user => {
15 |           commit('loginSuccess', user);
16 |           return Promise.resolve(user);
17 |         },
18 |         error => {
19 |           commit('loginFailure');
20 |           return Promise.reject(error);
21 |         }
22 |       );
23 |     },
24 |     logout({ commit }) {
25 |       AuthService.logout();
26 |       commit('logout');
27 |     },
28 |     register({ commit }, user) {
29 |       return AuthService.register(user).then(
30 |         response => {
31 |           commit('registerSuccess');
32 |           return Promise.resolve(response.data);
33 |         },
34 |         error => {
35 |           commit('registerFailure');
36 |           return Promise.reject(error);
37 |         }
38 |       );
39 |     },
40 |     refreshToken({ commit }, accessToken) {
41 |       commit('refreshToken', accessToken);
42 |     }
43 |   },
44 |   mutations: {
45 |     loginSuccess(state, user) {
46 |       state.status.loggedIn = true;
47 |       state.user = user;
48 |     },
49 |     loginFailure(state) {
50 |       state.status.loggedIn = false;
51 |       state.user = null;
52 |     },
53 |     logout(state) {
54 |       state.status.loggedIn = false;
55 |       state.user = null;
56 |     },
57 |     registerSuccess(state) {
58 |       state.status.loggedIn = false;
59 |     },
60 |     registerFailure(state) {
61 |       state.status.loggedIn = false;
62 |     },
63 |     refreshToken(state, accessToken) {
64 |       state.status.loggedIn = true;
65 |       state.user = { ...state.user, accessToken: accessToken };
66 |     }
67 |   }
68 | };
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Refresh Token with Axios and JWT example
 2 | 
 3 | ![vue-refresh-token-axios-jwt-example-flow](vue-refresh-token-axios-jwt-example-flow.png)
 4 | 
 5 | For instruction, please visit:
 6 | > [Vue Refresh Token with Axios and JWT example](https://www.bezkoder.com/vue-refresh-token/)
 7 | 
 8 | > [Vue 2 JWT Authentication with Vuex and Vue Router](https://bezkoder.com/jwt-vue-vuex-authentication/)
 9 | 
10 | ## Note:
11 | Open `src/services/setupInterceptors.js` and modify `config.headers` for appropriate back-end (found in the tutorial).
12 | 
13 | ```js
14 | instance.interceptors.request.use(
15 |   (config) => {
16 |     const token = TokenService.getLocalAccessToken();
17 |     if (token) {
18 |       // config.headers["Authorization"] = 'Bearer ' + token;  // for Spring Boot back-end
19 |       config.headers["x-access-token"] = token; // for Node.js Express back-end
20 |     }
21 |     return config;
22 |   },
23 |   (error) => {
24 |     return Promise.reject(error);
25 |   }
26 | );
27 | ```
28 | 
29 | ## Project setup
30 | ```
31 | npm install
32 | ```
33 | 
34 | ### Compiles and hot-reloads for development
35 | ```
36 | npm run serve
37 | ```
38 | 
39 | 
40 | ## Related Posts
41 | > [Using Typescript](https://bezkoder.com/vuex-typescript-jwt-auth/)
42 | 
43 | > [Vue 3 JWT Authentication with Vuex and Vue Router](https://bezkoder.com/vue-3-authentication-jwt/)
44 | 
45 | More Practice:
46 | > [Vue.js CRUD App with Vue Router & Axios](https://bezkoder.com/vue-js-crud-app/)
47 | 
48 | > [Vue Pagination with Axios and API example](https://bezkoder.com/vue-pagination-axios/)
49 | 
50 | > [Vue File Upload example using Axios](https://bezkoder.com/vue-axios-file-upload/)
51 | 
52 | Fullstack with Spring Boot Back-end:
53 | > [Spring Boot + Vue.js: Authentication with JWT & Spring Security Example](https://bezkoder.com/spring-boot-vue-js-authentication-jwt-spring-security/)
54 | 
55 | Fullstack with Node.js Express Back-end:
56 | > [Node.js Express + Vue.js: JWT Authentication & Authorization example](https://bezkoder.com/node-express-vue-jwt-auth/)
57 | 
58 | Fullstack CRUD:
59 | > [Vue.js + Node.js + Express + MySQL example](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
60 | 
61 | > [Vue.js + Node.js + Express + PostgreSQL example](https://bezkoder.com/vue-node-express-postgresql/)
62 | 
63 | > [Vue.js + Node.js + Express + MongoDB example](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
64 | 
65 | > [Vue.js + Spring Boot + MySQL/PostgreSQL example](https://bezkoder.com/spring-boot-vue-js-crud-example/)
66 | 
67 | > [Vue.js + Spring Boot + MongoDB example](https://bezkoder.com/spring-boot-vue-mongodb/)
68 | 
69 | > [Vue.js + Django example](https://bezkoder.com/django-vue-js-rest-framework/)
70 | 
71 | Integration (run back-end & front-end on same server/port)
72 | > [Integrate Vue.js with Spring Boot](https://bezkoder.com/integrate-vue-spring-boot/)
73 | 
74 | > [Integrate Vue App with Node.js Express](https://bezkoder.com/serve-vue-app-express/)
75 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav class="navbar navbar-expand navbar-dark bg-dark">
 4 |       <a href class="navbar-brand" @click.prevent>bezKoder</a>
 5 |       <div class="navbar-nav mr-auto">
 6 |         <li class="nav-item">
 7 |           <router-link to="/home" class="nav-link">
 8 |             <font-awesome-icon icon="home" />Home
 9 |           </router-link>
10 |         </li>
11 |         <li v-if="showAdminBoard" class="nav-item">
12 |           <router-link to="/admin" class="nav-link">Admin Board</router-link>
13 |         </li>
14 |         <li v-if="showModeratorBoard" class="nav-item">
15 |           <router-link to="/mod" class="nav-link">Moderator Board</router-link>
16 |         </li>
17 |         <li class="nav-item">
18 |           <router-link v-if="currentUser" to="/user" class="nav-link">User</router-link>
19 |         </li>
20 |       </div>
21 | 
22 |       <div v-if="!currentUser" class="navbar-nav ml-auto">
23 |         <li class="nav-item">
24 |           <router-link to="/register" class="nav-link">
25 |             <font-awesome-icon icon="user-plus" /> Sign Up
26 |           </router-link>
27 |         </li>
28 |         <li class="nav-item">
29 |           <router-link to="/login" class="nav-link">
30 |             <font-awesome-icon icon="sign-in-alt" /> Login
31 |           </router-link>
32 |         </li>
33 |       </div>
34 | 
35 |       <div v-if="currentUser" class="navbar-nav ml-auto">
36 |         <li class="nav-item">
37 |           <router-link to="/profile" class="nav-link">
38 |             <font-awesome-icon icon="user" />
39 |             {{ currentUser.username }}
40 |           </router-link>
41 |         </li>
42 |         <li class="nav-item">
43 |           <a class="nav-link" href @click.prevent="logOut">
44 |             <font-awesome-icon icon="sign-out-alt" /> LogOut
45 |           </a>
46 |         </li>
47 |       </div>
48 |     </nav>
49 | 
50 |     <div class="container">
51 |       <router-view />
52 |     </div>
53 |   </div>
54 | </template>
55 | 
56 | <script>
57 | import EventBus from "./common/EventBus";
58 | 
59 | export default {
60 |   computed: {
61 |     currentUser() {
62 |       return this.$store.state.auth.user;
63 |     },
64 |     showAdminBoard() {
65 |       if (this.currentUser && this.currentUser.roles) {
66 |         return this.currentUser.roles.includes('ROLE_ADMIN');
67 |       }
68 | 
69 |       return false;
70 |     },
71 |     showModeratorBoard() {
72 |       if (this.currentUser && this.currentUser.roles) {
73 |         return this.currentUser.roles.includes('ROLE_MODERATOR');
74 |       }
75 | 
76 |       return false;
77 |     }
78 |   },
79 |   methods: {
80 |     logOut() {
81 |       this.$store.dispatch('auth/logout');
82 |       this.$router.push('/login');
83 |     }
84 |   },
85 |   mounted() {
86 |     EventBus.on("logout", () => {
87 |       this.logOut();
88 |     });
89 |   },
90 |   beforeDestroy() {
91 |     EventBus.remove("logout");
92 |   }
93 | };
94 | </script>
95 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="col-md-12">
  3 |     <div class="card card-container">
  4 |       <img
  5 |         id="profile-img"
  6 |         src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
  7 |         class="profile-img-card"
  8 |       />
  9 |       <form name="form" @submit.prevent="handleLogin">
 10 |         <div class="form-group">
 11 |           <label for="username">Username</label>
 12 |           <input
 13 |             v-model="user.username"
 14 |             v-validate="'required'"
 15 |             type="text"
 16 |             class="form-control"
 17 |             name="username"
 18 |           />
 19 |           <div
 20 |             v-if="errors.has('username')"
 21 |             class="alert alert-danger"
 22 |             role="alert"
 23 |           >Username is required!</div>
 24 |         </div>
 25 |         <div class="form-group">
 26 |           <label for="password">Password</label>
 27 |           <input
 28 |             v-model="user.password"
 29 |             v-validate="'required'"
 30 |             type="password"
 31 |             class="form-control"
 32 |             name="password"
 33 |           />
 34 |           <div
 35 |             v-if="errors.has('password')"
 36 |             class="alert alert-danger"
 37 |             role="alert"
 38 |           >Password is required!</div>
 39 |         </div>
 40 |         <div class="form-group">
 41 |           <button class="btn btn-primary btn-block" :disabled="loading">
 42 |             <span v-show="loading" class="spinner-border spinner-border-sm"></span>
 43 |             <span>Login</span>
 44 |           </button>
 45 |         </div>
 46 |         <div class="form-group">
 47 |           <div v-if="message" class="alert alert-danger" role="alert">{{message}}</div>
 48 |         </div>
 49 |       </form>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | import User from '../models/user';
 56 | 
 57 | export default {
 58 |   name: 'Login',
 59 |   data() {
 60 |     return {
 61 |       user: new User('', ''),
 62 |       loading: false,
 63 |       message: ''
 64 |     };
 65 |   },
 66 |   computed: {
 67 |     loggedIn() {
 68 |       return this.$store.state.auth.status.loggedIn;
 69 |     }
 70 |   },
 71 |   created() {
 72 |     if (this.loggedIn) {
 73 |       this.$router.push('/profile');
 74 |     }
 75 |   },
 76 |   methods: {
 77 |     handleLogin() {
 78 |       this.loading = true;
 79 |       this.$validator.validateAll().then(isValid => {
 80 |         if (!isValid) {
 81 |           this.loading = false;
 82 |           return;
 83 |         }
 84 | 
 85 |         if (this.user.username && this.user.password) {
 86 |           this.$store.dispatch('auth/login', this.user).then(
 87 |             () => {
 88 |               this.$router.push('/profile');
 89 |             },
 90 |             error => {
 91 |               this.loading = false;
 92 |               this.message =
 93 |                 (error.response && error.response.data && error.response.data.message) ||
 94 |                 error.message ||
 95 |                 error.toString();
 96 |             }
 97 |           );
 98 |         }
 99 |       });
100 |     }
101 |   }
102 | };
103 | </script>
104 | 
105 | <style scoped>
106 | label {
107 |   display: block;
108 |   margin-top: 10px;
109 | }
110 | 
111 | .card-container.card {
112 |   max-width: 350px !important;
113 |   padding: 40px 40px;
114 | }
115 | 
116 | .card {
117 |   background-color: #f7f7f7;
118 |   padding: 20px 25px 30px;
119 |   margin: 0 auto 25px;
120 |   margin-top: 50px;
121 |   -moz-border-radius: 2px;
122 |   -webkit-border-radius: 2px;
123 |   border-radius: 2px;
124 |   -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
125 |   -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
126 |   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
127 | }
128 | 
129 | .profile-img-card {
130 |   width: 96px;
131 |   height: 96px;
132 |   margin: 0 auto 10px;
133 |   display: block;
134 |   -moz-border-radius: 50%;
135 |   -webkit-border-radius: 50%;
136 |   border-radius: 50%;
137 | }
138 | </style>


--------------------------------------------------------------------------------
/src/views/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="col-md-12">
  3 |     <div class="card card-container">
  4 |       <img
  5 |         id="profile-img"
  6 |         src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
  7 |         class="profile-img-card"
  8 |       />
  9 |       <form name="form" @submit.prevent="handleRegister">
 10 |         <div v-if="!successful">
 11 |           <div class="form-group">
 12 |             <label for="username">Username</label>
 13 |             <input
 14 |               v-model="user.username"
 15 |               v-validate="'required|min:3|max:20'"
 16 |               type="text"
 17 |               class="form-control"
 18 |               name="username"
 19 |             />
 20 |             <div
 21 |               v-if="submitted && errors.has('username')"
 22 |               class="alert-danger"
 23 |             >{{errors.first('username')}}</div>
 24 |           </div>
 25 |           <div class="form-group">
 26 |             <label for="email">Email</label>
 27 |             <input
 28 |               v-model="user.email"
 29 |               v-validate="'required|email|max:50'"
 30 |               type="email"
 31 |               class="form-control"
 32 |               name="email"
 33 |             />
 34 |             <div
 35 |               v-if="submitted && errors.has('email')"
 36 |               class="alert-danger"
 37 |             >{{errors.first('email')}}</div>
 38 |           </div>
 39 |           <div class="form-group">
 40 |             <label for="password">Password</label>
 41 |             <input
 42 |               v-model="user.password"
 43 |               v-validate="'required|min:6|max:40'"
 44 |               type="password"
 45 |               class="form-control"
 46 |               name="password"
 47 |             />
 48 |             <div
 49 |               v-if="submitted && errors.has('password')"
 50 |               class="alert-danger"
 51 |             >{{errors.first('password')}}</div>
 52 |           </div>
 53 |           <div class="form-group">
 54 |             <button class="btn btn-primary btn-block">Sign Up</button>
 55 |           </div>
 56 |         </div>
 57 |       </form>
 58 | 
 59 |       <div
 60 |         v-if="message"
 61 |         class="alert"
 62 |         :class="successful ? 'alert-success' : 'alert-danger'"
 63 |       >{{message}}</div>
 64 |     </div>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | import User from '../models/user';
 70 | 
 71 | export default {
 72 |   name: 'Register',
 73 |   data() {
 74 |     return {
 75 |       user: new User('', '', ''),
 76 |       submitted: false,
 77 |       successful: false,
 78 |       message: ''
 79 |     };
 80 |   },
 81 |   computed: {
 82 |     loggedIn() {
 83 |       return this.$store.state.auth.status.loggedIn;
 84 |     }
 85 |   },
 86 |   mounted() {
 87 |     if (this.loggedIn) {
 88 |       this.$router.push('/profile');
 89 |     }
 90 |   },
 91 |   methods: {
 92 |     handleRegister() {
 93 |       this.message = '';
 94 |       this.submitted = true;
 95 |       this.$validator.validate().then(isValid => {
 96 |         if (isValid) {
 97 |           this.$store.dispatch('auth/register', this.user).then(
 98 |             data => {
 99 |               this.message = data.message;
100 |               this.successful = true;
101 |             },
102 |             error => {
103 |               this.message =
104 |                 (error.response && error.response.data && error.response.data.message) ||
105 |                 error.message ||
106 |                 error.toString();
107 |               this.successful = false;
108 |             }
109 |           );
110 |         }
111 |       });
112 |     }
113 |   }
114 | };
115 | </script>
116 | 
117 | <style scoped>
118 | label {
119 |   display: block;
120 |   margin-top: 10px;
121 | }
122 | 
123 | .card-container.card {
124 |   max-width: 350px !important;
125 |   padding: 40px 40px;
126 | }
127 | 
128 | .card {
129 |   background-color: #f7f7f7;
130 |   padding: 20px 25px 30px;
131 |   margin: 0 auto 25px;
132 |   margin-top: 50px;
133 |   -moz-border-radius: 2px;
134 |   -webkit-border-radius: 2px;
135 |   border-radius: 2px;
136 |   -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
137 |   -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
138 |   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
139 | }
140 | 
141 | .profile-img-card {
142 |   width: 96px;
143 |   height: 96px;
144 |   margin: 0 auto 10px;
145 |   display: block;
146 |   -moz-border-radius: 50%;
147 |   -webkit-border-radius: 50%;
148 |   border-radius: 50%;
149 | }
150 | </style>


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