如何解决使用 next-auth 凭据提供程序时如何发送 httponly cookie 客户端?
我正在创建下一个 js 应用程序,使用 next-auth 来处理身份验证。
我有一个外部后端 api,所以我使用的是凭据提供程序。
问题是后端发送了 httponly cookie,但是当我向客户端发出请求时,这些 cookie 没有被附加到浏览器。
在 /pages/api/[...auth].js 中
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import clientAxios from '../../../config/configAxios'
export default NextAuth({
providers: [
Providers.Credentials({
async authorize(credentials) {
try {
const login = await clientAxios.post('/api/login',{
username: credentials.username,password: credentials.password,is_master: credentials.is_master
})
const info = login.data.data.user
const token = {
accessToken: login.data.data.access_token,expiresIn: login.data.data.expires_in,refreshToken: login.data.data.refresh_token
}
// I can see cookies here
const cookies = login.headers['set-cookie']
return { info,token,cookies }
} catch (error) {
console.log(error)
throw (Error(error.response.data.M))
}
}
})
],callbacks: {
async jwt(token,user,account,profile,isNewUser) {
if (token) {
// Here cookies are set but only in server side
clientAxios.defaults.headers.common['Cookie'] = token.cookies
}
if (user) {
token = {
user: user.info,...user.token,}
}
return token
},async session(session,token) {
// Add property to session,like an access_token from a provider.
session.user = token.user
session.accessToken = token.accessToken
session.refreshToken = token.refreshToken
return session
}
},session: {
jwt: true
}
})
我的 axios 配置文件
import axios from 'axios';
const clientAxios = axios.create({
baseURL: process.env.backendURL,withCredentials: true,headers:{
'Accept' : 'application/json','Content-Type' : 'application/json'
}
});
export default clientAxios;
页面组件
import { getSession } from "next-auth/client";
import clientAxios from "../../../config/configAxios";
import { useEffect } from "react"
export default function PageOne (props) {
useEffect(async () => {
// This request fails,cookies are not sent
const response = await clientAxios.get('/api/info');
},[])
return (
<div>
<h1>Hello World!</h1>
</div>
)
}
export async function getServerSideProps (context) {
const session = await getSession(context)
if (!session) {
return {
redirect: {
destination: '/login',permanent: false
}
}
}
// This request works
const response = await clientAxios.get('/api/info');
return {
props: {
session,info: response.data
}
}
}
解决方法
您需要配置 clientAxios
以在所有返回服务器的请求中包含服务器发送的 cookie 作为其响应的一部分。设置 api.defaults.withCredentials = true;
应该可以满足您的需求。请参阅下面我的 vue 应用程序的 axios 配置:
import axios from "axios";
export default ({ Vue,store,router }) => {
const api = axios.create({
baseURL: process.env.VUE_APP_API_URL
});
api.defaults.withCredentials = true; ------> this line includes the cookies
Vue.prototype.$axios = api;
store.$axios = api;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。