Как автоматически выйти из системы по истечении срока действия cookie в Nuxt? - PullRequest
Новая
       69

Как автоматически выйти из системы по истечении срока действия cookie в Nuxt?

0 голосов
/ 11 ноября 2019

Я использую официальный пример NuxtJS Auth Routes для входа в систему с помощью экспресс-сессий, он отлично работает

файл app.js 

const express = require('express')
const session = require('express-session')
const app = express()

app.use(express.json())
app.use(express.urlencoded({ extended: true }))
// session middleware
app.use(
  session({
    secret: 'super-secret-key',
    resave: false,
    saveUninitialized: false,
    cookie: { maxAge: 60000 }
  })
)

// Create express router
const router = express.Router()

// Transform req & res to have the same API as express
// So we can use res.status() & res.json()
router.use((req, res, next) => {
  Object.setPrototypeOf(req, app.request)
  Object.setPrototypeOf(res, app.response)
  req.res = res
  res.req = req
  next()
})

// Add POST - /api/login
router.post('/login', (req, res) => {
  if (req.body.username === 'demo' && req.body.password === 'demo') {
    req.session.authUser = { username: 'demo' }
    return res.json({ username: 'demo' })
  }
  res.status(401).json({ message: 'Bad credentials' })
})

// Add POST - /api/logout
router.post('/logout', (req, res) => {
  delete req.session.authUser
  res.json({ ok: true })
})

app.use('/api', router)

module.exports = app

ПроблемаКогда срок действия файла cookie истек, пользователь все еще входит в интерфейс. Если они получают доступ к конечной точке, они выходят из системы, хотя, я предполагаю, что вызывается nuxtServerInit, который сбрасывает пользователя

store / index.js 

import axios from 'axios'

export const state = () => ({
  authUser: null
})

export const mutations = {
  SET_USER(state, user) {
    state.authUser = user
  }
}

export const actions = {
  // nuxtServerInit is called by Nuxt.js before server-rendering every page
  nuxtServerInit({ commit }, { req }) {
    if (req.session && req.session.authUser) {
      commit('SET_USER', req.session.authUser)
    }
  },
  async login({ commit }, { username, password }) {
    try {
      const { data } = await axios.post('/api/login', { username, password })
      commit('SET_USER', data)
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },

  async logout({ commit }) {
    await axios.post('/api/logout')
    commit('SET_USER', null)
  }
}

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

Если не считать, что веб-сокет ожидает уведомления о выходе, вы не сможете сразу же выйти из системы по истечении срока действия. Вот почему он ждет, пока вы не попытаетесь снова перемещаться. Если вы хотите мгновенно выйти из системы, вы можете создать веб-сокет, который ожидает сигнала от сервера по истечении срока действия cookie.

https://github.com/nuxt/nuxt.js/tree/dev/examples/with-sockets

Однако это конкретный вариант использования. ,Большинство веб-сайтов просто ждут, чтобы пользователь предпринял другое действие, которое требует проверки его токена на срок действия, а затем принимает соответствующие меры.

Упрощенная версия этого может быть выполнена путем отслеживания времени истечения, оставшегося на передней панели. конец в магазине. Затем вы можете использовать свойство computed, чтобы проверить постоянно уменьшающийся отсчет времени, оставленного пользователем. Когда это достигает нуля, вы можете запустить свои мутации.

0 голосов
/ 12 ноября 2019

Очень близко к ответу здесь. Идея состоит в том, чтобы установить req.session.expires, когда пользователь публикует маршрут входа в систему. На данный момент проблема заключается в методе асинхронного входа в систему, как получить доступ к req.session?

Это файл server / index.js 

// Add POST - /api/login
router.post('/login', (req, res) => {
  if (req.body.username === 'demo' && req.body.password === 'demo') {
    req.session.authUser = { username: 'demo' }
    req.session.expires = req.session.cookie.expires.getTime()
    return res.json({ username: 'demo' })
  }
  res.status(401).json({ message: 'Bad credentials' })
})

Это магазин/index.js file 

export const actions = {
  // nuxtServerInit is called by Nuxt.js before server-rendering every page
  nuxtServerInit({ commit }, { req }) {
    if (req.session && req.session.authUser) {
      commit('SET_USER', req.session.authUser)
    }
    if (req.session && req.session.expires) {
      commit('SET_EXPIRES', req.session.expires)
    }
  },
  // How do you get req.session.expires HERE???
  async login({ commit }, { username, password }) {
    try {
      const response = await this.$axios.post('/api/login', {
        username,
        password
      })
      console.log(response, response.request, response.request.session)
      commit('SET_USER', response.data)
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },

  async logout({ commit }) {
    await this.$axios.post('/api/logout')
    commit('SET_USER', null)
    commit('SET_EXPIRES', null)
  }
}
...