nuxt auth - 登录:假和用户:空

Posted

技术标签:

【中文标题】nuxt auth - 登录:假和用户:空【英文标题】:nuxt auth - loggedIn:false and user:null 【发布时间】:2022-01-16 04:09:45 【问题描述】:

请有人帮助我,我使用 Nuxt js 和 laravel。用户已成功登录,但已登录仍然为假,并且用户为空,我已经尝试了所有其他方法,请帮助我。 我认为错误来自状态

nuxt.config.js

export default 
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: 
    title: 'laravel-nuxt-api',
    htmlAttrs: 
      lang: 'en'
    ,
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: '' ,
      
       name: 'format-detection', content: 'telephone=no' 
    ],
    link: [
       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
    ]
  ,

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  '@nuxtjs/axios',
   '@nuxtjs/auth-next',
  ],
  auth:
   strategies: 
    laravelSanctum: 
      provider: 'laravel/sanctum',
      url: 'http://127.0.0.1:8000', 
     
      user: 
                property:false,
            , 
      endpoints:
          login:url:"/api/login",method:"post",
          logout:url:"/api/logout",method:"post",
          allrecords:url:"/api/allrecords",method:"post",
          user: url: "/api/user",method:"get", property: false 
        ,
        
       
      
      ,
      redirect:
        login:'/auth/login',
        logout:'/',
        home:'/'
      
    ,
  axios:
    baseURL:"http://127.0.0.1:8000",
  ,

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: 
  

登录.vue

<template>
    <div>
        <Navbar/>
        <a href="#" @click="login()">Login</a>

    </div>

</template>
<script>
    export default 
        data()
            return 
                form:
                    email: 'ade@gmail.com',
                     password: '12345'
                
            
        ,
        methods:
               async login()
           this.errors='';
           try 
               const res = await this.$auth.loginWith('laravelSanctum', 
          data:this.form)
               if(res)
                await this.$auth.setUser(res.data.user )
                console.log(res);
               
            //    console.log(res);
            catch (error) 
               console.log(error)

           


        
        
    
</script>

包.json


  "name": "laravel-nuxt-api",
  "version": "1.0.0",
  "private": true,
  "scripts": 
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  ,
  "dependencies": 
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/auth-next": "5.0.0-1637745161.ea53f98",
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7"
  ,
  "devDependencies": 
    "@nuxtjs/tailwindcss": "^4.2.0",
    "postcss": "^8.3.5"
  

在邮递员中工作正常,请帮助我

【问题讨论】:

这里可能需要setUser,因为您将user.property 设置为false。 请问我应该把 setUser 放在哪里? 就在loginWith之后。 这是我所做的,但它仍然是错误的 嘿,请不要在 cmets 中发布代码。而是编辑您的问题。 【参考方案1】:

nuxt.config.js 文件中设置以下内容

auth: 
  strategies: 
    laravelSanctum: 
      user: 
        property: false,
        autoFetch: false,
      ,
    ,
  ,
,

打电话

await this.$auth.loginWith('laravelSanctum', ...)
await this.$auth.setUser( ... ) // your cool JS object representing the user

应该在这里完成工作。

【讨论】:

以上是关于nuxt auth - 登录:假和用户:空的主要内容,如果未能解决你的问题,请参考以下文章

登录后无法立即获取用户,但刷新工作@nuxt-auth

nuxt auth 在登录前调用用户并给出 401

Nuxt Auth - 未设置用户数据

浏览器刷新后 Nuxt auth 用户重置

使用 nuxt-auth 成功认证后如何获取用户信息

使用 nuxt auth 和 laravel 护照登录时出现错误 404