I have two middlewares, one for router, specified in nuxt.config.js (auth.js)
import { AUTH_TOKEN_REQUEST } from '../store/auth'
const getCookieFromReq = req => {
return decodeURIComponent(req.headers.cookie)
.split(';')
.find(c => c.startsWith('feathers-jwt='))
}
const getTokenFromCookie = cookie => {
return cookie ? cookie.trim().split('=')[1] : null
}
export default ({ store, req }) => {
console.log('---AUTH MIDDLEWARE---')
const cookie = process.server ? getCookieFromReq(req) : decodeURIComponent(document.cookie)
const token = getTokenFromCookie(cookie)
if (token) {
return store.dispatch(`auth/${AUTH_TOKEN_REQUEST}`, token)
}
}
and second specified in any page who needs authentication (authenticated.js)
export default ({ store, route, redirect }) => {
console.log('---AUTHENTICATED MIDDLEWARE---')
const isAuthenticated = store.getters['auth/isAuthenticated']
if (!isAuthenticated) {
redirect('/auth/login', { next: encodeURIComponent(route.path) })
}
}
like this page (index.vue)
import { mapState, mapGetters } from 'vuex'
export default {
middleware: ['authenticated'],
computed: {
...mapState('users', ['users']),
...mapGetters('auth', ['isAuthenticated'])
},
fetch: ({ store }) => {
console.log('---FETCH USERS---')
if (store.getters['auth/isAuthenticated']) {
return store.dispatch('users/USERS_FIND_REQUEST')
}
}
}
And have a problem because fetch method is fired on my page after redirect in middleware, but only on client. When I first click link to that page after refresh all is ok (fetch is not called), but when i go back and click link next time I have this effect.
auth.js:17 ---AUTH MIDDLEWARE---
authenticated.js:17 ---AUTHENTICATED MIDDLEWARE---
index.vue?e488:27 ---FETCH ADMIN---
auth.js:17 ---AUTH MIDDLEWARE---
Why is fetch fired?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2319">#c2319</a>)</em></sub></div>