使用本地策略实现 nuxtjs/auth 的问题

Posted 2023-03-07

【中文标题】使用本地策略实现 nuxtjs/auth 的问题

【英文标题】：Problem implementing nuxtjs/auth using local strategy

【发布时间】：2020-10-26 09:33:40

【问题描述】：

我正在学习 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
                
            
        
    

;

【问题讨论】：

试试这个：***.com/questions/52576160/…

您在 nuxt 应用程序中的端点 url 错误

您能指出错误吗？谢谢

【参考方案1】：

试试这个：

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
                
            
        
    

由于在内部数据中接收到来自api的响应，因此在使用axios时。

【讨论】：

您能否查看开发人员工具的“网络”选项卡，以确定是否正在命中所需的 API。如果是，请同时查看响应。

此解决方案返回数据但不返回预期数据。我的 verify-token.js 返回错误我发现很难理解为什么。 API 通过邮递员返回预期数据

点击“查看代码”按钮查看postman正在使用的代码，和你的比较一下，看看有什么不同。

【参考方案2】：

好吧，它只会在我刷新整个浏览器后更新。我认为热重载就足够了，但它确实有效。这是我的身份验证策略设置

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
            
        
    

感谢所有评论。它增强了我的信心和解决问题的能力。