Vue.js JWT Authentication with Vuex and Vue Router

For instruction, please visit:

Vue 2 JWT Authentication with Vuex and Vue Router

Using Typescript

Vue 3 JWT Authentication with Vuex and Vue Router

More Practice:

Vue.js CRUD App with Vue Router & Axios

Vue Pagination with Axios and API example

Vue File Upload example using Axios

Fullstack with Spring Boot Back-end:

Spring Boot + Vue.js: Authentication with JWT & Spring Security Example

Fullstack with Node.js Express Back-end:

Node.js Express + Vue.js: JWT Authentication & Authorization example

Fullstack CRUD:

Vue.js + Node.js + Express + MySQL example

Vue.js + Node.js + Express + PostgreSQL example

Vue.js + Node.js + Express + MongoDB example

Vue.js + Spring Boot + MySQL/PostgreSQL example

Vue.js + Spring Boot + MongoDB example

Vue.js + Django example

Integration (run back-end & front-end on same server/port)

Integrate Vue.js with Spring Boot

Integrate Vue App with Node.js Express

Note:

Open src/services/auth-header.js and modify return statement for appropriate back-end.

export default function authHeader() {
  let user = JSON.parse(localStorage.getItem('user'));

  if (user && user.accessToken) {
    return { Authorization: 'Bearer ' + user.accessToken }; // for Spring Boot back-end
    // return { 'x-access-token': user.accessToken };       // for Node.js Express back-end
  } else {
    return {};
  }
}

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.