Vuejs ssr Check Benutzer werden für jede Anforderung authentifiziert

Question

Ich verwende diesen ssr vorformulierten für meine app, https://github.com/vuejs/vue-hackernews-2.0

Ich weiß nicht, wie Logik zur Überprüfung implementieren Benutzern für jeden Benutzer Seitenanfrage authentifiziert ist, I‘ verwende Cookies zur Speicherung von Benutzer-token

ich sah, dass Router umgehen Anfrage vor Komponente machen:

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
     // this route requires auth, check if logged in 
     // if not, redirect to login page. 
     // isLoggedIn() 
     // .then(response => response.json()) 
     // .then(json => { 
     //  console.log(json[0]) 
     //  next() 
     // }) 
     // .catch(error => { 
     //  console.log(error) 
     //  next() 
     // }) 

     const x = true 

     if (!x) { 
     next({ 
      path: '/signin', 
      query: { redirect: to.fullPath } 
     }) 
     } else { 
     next() 
     } 
    } else { 
     next() // make sure to always call next()! 
    } 
    }) 

    return router 
} 

Aber hier ist Problem, Router diesen Code in Client-Seite zu verwenden beginnen und in Server-Seite, was in meinem Fall ein bisschen falsch ist.

Wie senden Sie eine Anfrage für is user authenticated nur einmal, oder in Client-Seite oder Server-Seite?

Answer 1

Beantwortung auf meiner Frage, nächster Ansatz - ist das, was ich gesucht, dieser vue Router-Middleware-Benutzer überprüfen wird, bevor andere Anforderungen zu senden (in meinen Komponenten Methoden wie asyncData), dann setzte info des Benutzers in Speicher:

// router/index.js

export function createRouter (cookies) { 
    const router = new Router({ ... }) 

    router.beforeEach((to, from, next) => { 
    // this route requires auth, check if logged in 
    // if not, redirect to login page. 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
     if (router.app.$store) { 
     router.app.$store 
      .dispatch('FETCH_CURRENT_USER', cookies) 
      .then(next) 
      .catch(() => next('/signin')) 
     } else { 
     next() 
     } 
    } else { 
     next() 
    } 

    return router 
} 

// store/actions.js

export default { 
    FETCH_CURRENT_USER: ({ commit }, cookie) => { 
    const values = { 
     credentials: 'include', 
     headers: { 
     'Content-Type': 'application/json', 
     Origin: FRONTEND_HOST, 
     Cookie: cookie 
     } 
    } 

    return fetch(`${API_HOST}/api/v1/users/me`, values) 
     .then(handleStatus) 
     .then(handleJSON) 
     .then(json => commit('SET_CURRENT_USER', json)) 
    } 
}