Skip to content

Commit 435adcd

Browse files
tienbkutienbku
committed
first commit
1 parent cc225f8 commit 435adcd

26 files changed

+1118
-90
lines changed

‎README.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,62 @@
1-
# vue-3-jwt-refresh-token
1+
# Vue 3 JWT Refresh Token with Axios example
2+
3+
![vue-3-refresh-token-axios-jwt-example-flow](vue-3-refresh-token-axios-jwt-example-flow.png)
4+
5+
For instruction, please visit:
6+
> [Vue 3 JWT Refresh Token with Axios example](https://bezkoder.com/vue-3-refresh-token/)
7+
8+
> [Vue 3 Authentication & Authorization with JWT, Vuex and Vue Router](https://bezkoder.com/vue-3-authentication-jwt/)
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+
Related Posts:
30+
> [Vue 2 JWT Authentication with Vuex and Vue Router](https://bezkoder.com/jwt-vue-vuex-authentication/)
31+
32+
> [Using Typescript](https://bezkoder.com/vuex-typescript-jwt-auth/)
33+
34+
> [Vue 3 CRUD example with Axios and Vue Router](https://bezkoder.com/vue-3-crud/)
35+
36+
Fullstack with Spring Boot Back-end:
37+
> [Spring Boot + Vue.js: Authentication with JWT & Spring Security Example](https://bezkoder.com/spring-boot-vue-js-authentication-jwt-spring-security/)
38+
39+
Fullstack with Node.js Express Back-end:
40+
> [Node.js Express + Vue.js: JWT Authentication & Authorization example](https://bezkoder.com/node-express-vue-jwt-auth/)
41+
42+
Fullstack CRUD:
43+
> [Vue.js + Node.js + Express + MySQL example](https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/)
44+
45+
> [Vue.js + Node.js + Express + PostgreSQL example](https://bezkoder.com/vue-node-express-postgresql/)
46+
47+
> [Vue.js + Node.js + Express + MongoDB example](https://bezkoder.com/vue-node-express-mongodb-mevn-crud/)
48+
49+
> [Vue.js + Spring Boot + MySQL/PostgreSQL example](https://bezkoder.com/spring-boot-vue-js-crud-example/)
50+
51+
> [Vue.js + Spring Boot + MongoDB example](https://bezkoder.com/spring-boot-vue-mongodb/)
52+
53+
> [Vue.js + Django example](https://bezkoder.com/django-vue-js-rest-framework/)
54+
55+
Integration (run on same server/port):
56+
> [Integrate Vue.js with Spring Boot](https://bezkoder.com/integrate-vue-spring-boot/)
57+
58+
> [Integrate Vue App with Node.js Express](https://bezkoder.com/serve-vue-app-express/)
59+
260

361
## Project setup
462
```

‎package-lock.json

Lines changed: 119 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,19 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"@fortawesome/fontawesome-svg-core": "^1.2.35",
12+
"@fortawesome/free-solid-svg-icons": "^5.15.3",
13+
"@fortawesome/vue-fontawesome": "^3.0.0-4",
14+
"axios": "^0.21.1",
15+
"bootstrap": "^4.6.0",
1116
"core-js": "^3.6.5",
12-
"vue": "^3.0.0"
17+
"jquery": "^3.6.0",
18+
"popper.js": "^1.16.1",
19+
"vee-validate": "^4.4.7",
20+
"vue": "^3.0.0",
21+
"vue-router": "^4.0.10",
22+
"vuex": "^4.0.2",
23+
"yup": "^0.32.9"
1324
},
1425
"devDependencies": {
1526
"@vue/cli-plugin-babel": "~4.5.0",

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
8+
<title>Vue 3 JWT Refresh Token</title>
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
<strong>We're sorry but 'Vue 3 JWT Refresh Token' doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1313
</noscript>
1414
<div id="app"></div>
1515
<!-- built files will be auto injected -->

0 commit comments

Comments
 (0)