Vue或Axios不存储会话cookie
我遇到了一个问题,但我不知道它在哪里以及为什么。我有一个基于express4(nodejs)的后端API我们用护照实现了Auth。
当我使用邮递员时,我登录/登录后登录。它存储会话cookie,现在可以访问所有路由,因为cookie未过期。
但我的前端基于VueJS。我使用Axios来执行请求。请求似乎很好。但是存储了任何cookie,因此浏览器在登录页面上进行环回。
我试过没有auth检查或不一样。但对于邮递员来说,这是有效的
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();
});
谢谢 !
回答如下:
Vue或Axios不存储会话cookie
我遇到了一个问题,但我不知道它在哪里以及为什么。我有一个基于express4(nodejs)的后端API我们用护照实现了Auth。
当我使用邮递员时,我登录/登录后登录。它存储会话cookie,现在可以访问所有路由,因为cookie未过期。
但我的前端基于VueJS。我使用Axios来执行请求。请求似乎很好。但是存储了任何cookie,因此浏览器在登录页面上进行环回。
我试过没有auth检查或不一样。但对于邮递员来说,这是有效的
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();
});
谢谢 !
回答如下: