Vue 또는 Axios 세션 쿠키 저장 안 함

Vue 또는 Axios 세션 쿠키 저장 안 함

나는 문제에 직면해 있지만 그것이 어디에 있고 왜 있는지는 모른다.익스프레스4(nodejs) 기반 백엔드 API를 가지고 있다.우리는 여권과 함께 Auth를 구현했다.

나는 우체부를 사용할 때 /로그인 후기로 로그인을 한다.그것은 세션 쿠키를 저장하고 쿠키가 만료되지 않았기 때문에 모든 루트를 이용할 수 있다.

하지만 VueJS를 기반으로 한 제 프런트엔드로.나는 요청서 작성에 악시오스를 사용한다.요청은 괜찮은 것 같은데, 쿠키가 저장되어 있어서 브라우저가 로그인 페이지에서 루프백을 한다.

나는 인증 수표 없이 노력했다. 아니면 똑같이 하지 않았다.하지만 우체부에게는 효과가 있다.

Vue의 main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Axios from 'axios'
Vue.use(VueRouter)

import auth from './utils/auth'

import App from './components/App.vue'

import Login from './components/Login.vue'
import Home from './components/Containers.vue'

require('font-awesome-loader');

function requireAuth (to, from, next) {
  if (!auth.checkAuth()) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'containers', component: Home, beforeEnter: requireAuth },
    { path: '/login', component: Login },
    { path: '/logout',
      beforeEnter (to, from, next) {
        auth.logout()
        next('/')
      }}
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

auth.js(요청이 이루어진 경우)

import axios from 'axios'
import { API_URL } from '../config/app'

export default {

  user: {
    authenticated: false
  },

  login (email, pass, cb) {
    LoginRequest(email, pass, (res) => {
      this.user.authenticated = res.authenticated
      if (this.user.authenticated) {
        console.log('ok')
        if (cb) cb(true)
      } else {
        console.log('pasok')
        if (cb) cb(false)
      }
    })
  },

  checkAuth () {
    if (getAuth()) {
      this.authenticated = true
    } else {
      this.authenticated = false
    }
  },

  logout (cb) {
    this.user.authenticated = false
    if (cb) cb()
  }
}

function LoginRequest (email, pass, cb) {
  axios.post(API_URL + '/api/login', {
    email: email,
    password: pass
  }).then(response => {
    if (response.status === 200) {
      cb({ authenticated: true })
    } else {
      cb({ authenticated: false })
    }
  }, response => {
    cb({ authenticated: false })
  })
}

function getAuth (cb) {
  axios.get(API_URL + '/me').then(response => {
    return true
  }, response => {
    return false
  })
}

편집 : 백엔드에서 사용하는 코르스:

 // allow CORS:
        app.use(function (req, res, next) {
          res.header("Access-Control-Allow-Origin", "*");
          res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT$
          res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,$
          next();
        });

고마워!

내 경험상 이것은 CORS (Cross-Origin Resource Sharing )에서 발생하는 이슈인 경향이 있다.

즉, API_일 경우URL이 응용프로그램의 auth.js가 실행 중인 도메인과 동일하지 않음.Axios는 기본적으로 쿠키를 전송할 수 없음.API에 대한 Cross Domain 자격 증명 사용을 허용하는 방법에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials를 참조하십시오.

실제로 코르스 모듈 https://www.npmjs.com/package/cors을 사용하여 서버 측에서 다음과 유사한 일부 구성에서 필요한 헤더를 적용할 수 있다.

var express = require('express')
  , cors = require('cors')
  , app = express()

app.use(cors({
    origin: "myapp.io",
    credentials: true
}))

공격자가 사이트 간 스크립팅 공격을 사용할 수 없는 경우 auth.js 스크립트가 실행 중인 원본 URL을 지정하는 것이 특히 중요하다.

그게 도움이 되길 바래!

또한 다음과 같이 공리 자격 증명을 전체적으로 설정할 수 있다.

axios.defaults.withCredentials = true

문서 내에서:

// `withCredentials` indicates whether or not cross-site Access-Control requests
// should be made using credentials
withCredentials: false, // default

참조URL: https://stackoverflow.com/questions/42221377/vue-or-axios-dont-store-session-cookie