api - 使用本地策略实现 nuxtjs/auth 的问题
问题描述
我正在关注 nuxtjs 教程,但在实现 nuxtjs/auth loginWith 时遇到问题。这很简单,但我不知道为什么它对我不起作用。使用邮递员进行测试,API 以令牌响应;
一切看起来都不错,将令牌保存到 cookie 和本地存储中。注册也可以,但无法登录。当我使用 Vue 开发工具进行检查时,当我期待一个用户对象时,它显示登录错误和用户未定义。有什么问题?
实际上,这是 Login.vue 的方法
async onLogin() {
try {
this.$auth.loginWith("local", {
data: {
email: this.email,
password: this.password
}
});
this.$router.push("/");
} catch (err) {
console.log(err);
}
}
这也是我的 nuxt.config.js
const URL = 'http://localhost:3000'
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: '/css/font-awesome/css/all.css' },
{ rel: 'stylesheet', href: '/css/default.css' }
]
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org
'bootstrap-vue/nuxt',
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/auth',
// Doc: https://github.com/nuxt/content
// '@nuxt/content',
],
/*
**Axios Module config
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: true,
baseURL: URL
},
proxy: {
"/api": URL
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
extend(config, ctx) {}
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: "/api/auth/login",
method: "post",
propertyName: "token"
},
user: {
url: "/api/auth/user",
method: "get",
propertyName: "token"
},
logout: true
}
}
}
}
};
解决方案
尝试这个:
auth: {
strategies: {
local: {
endpoints: {
login: {
url: "/api/auth/login",
method: "post",
propertyName: "data.token"
},
user: {
url: "/api/auth/user",
method: "get",
propertyName: "data.user"
},
logout: true
}
}
}
}
当使用 axios 时,由于在内部数据中接收到来自 api 的响应。
推荐阅读
- reactjs - 使用 firebase 中的 fetchSignInMethodsForEmail 方法时出现打字稿错误
- google-cloud-platform - GCP 项目创建日期
- boost - 我现在可以将 boost 用作 c++20 模块吗?
- reactjs - 如何从 React useEffect 中的另一个函数访问状态
- apache-spark - 在 spark kubernetes 3.0.1 中创建的 Spark 执行程序没有 root 权限
- c++ - C ++在函数中分配动态二维数组
- python - python中具有特定值操作的第一行
- python - 使用两个属性值抓取动态网页
- java - Java 检查:“for”循环可替换为增强的“for”
- docker - Docker 卷不会在本地系统中生成文件