Creating User Logins and API Authentication

In the last two chapters, we started working on session and JSON Web Token (JWT) authentication in Nuxt apps. We used sessions for authentication in Chapter 10, Adding a Vuex Store, to exercise nuxtServerInit. Then we used sessions and tokens together for authentication in Chapter 11, Writing Route Middlewares and Server Middlewares, to exercise per-route middleware, for example:

// store/index.js
nuxtServerInit({ commit }, { req }) {
  if (req.ctx.session && req.ctx.session.authUser) {
    commit('setUser', req.ctx.session.authUser)
  }
}

// middleware/token.js
export default async ({ store, error }) => {
  if (!store.state.auth.token) {
    // handle error
  }
  axios.defaults.headers.common['Authorization'] = Bearer: ${store.state.auth.token}
}

They may seem overwhelming if you are new to web authentication but...