Home>

Front end nuxt.js
I am studying application creation with spring boot as the back end.
Currently, I am creating a login function.
http: // localhost: 8080/api/auth/loginI want to skip the login API.
Because the API_URL set in .env is also used by other APIshttp: // localhost: 8080/apiI am thinking about it.

I have set the login API in the source code below, but the login endpoint set in nuxt.config.js is not reflected and is clogged.
If i delete the api in the API_URL of .env,http: // localhost: 8080/api/auth/loginBut I don't want to do that.

]

Corresponding source code

We have deleted and modified it for some questions.

export default {
    mode:'universal',
    auth: {
        redirect: {
            login:'/ login',
            logout:'/ login',
            callback: false,
            home:'/'
        },
        strategies: {
            local: {
                endpoint: {
                    login: {url:'/ auth/login', method:'post', propertyName:'token'},
                    logout: false,
                    user: false,
                },
                autoFetchUser: false
            },
        },
    },
    axios: {
        baseURL: process.env ["API_URL"],
    },
    modules: [
        '@ nuxtjs/axios',
        '@ nuxtjs/auth',
        'bootstrap-vue/nuxt',
    ],,
}
API_URL = http: // localhost: 8080/api
<template>
  
    
    <b-card bg-variant = "light">
      <b-form @ submit.prevent = "login">
          
          <b-icon icon = "person-fill" font-scale = "7.5" variant = "dark" />
          
        <b-form-group label = "Name or Email" label-for = "manage-login-name-or-email" label-size = "sm">
          <b-form-input size = "sm" type = "text" v-model = "login.name"></b-form-input>
        </b-form-group>
        <b-form-group label = "Password" label-for = "manage-login-password" label-size = "sm">
          <b-form-input id = "manage-login-password" size = "sm" type = "password" v-model = "login.password"></b-form-input>
        </b-form-group>
        <b-button type = "submit" variant = "primary" size = "sm">Login</b-button>
      </b-form>
    </b-card>
    
  
</template>
<script>
export default {
  name: "login",
  head () {
    return {
      title:'Admin login'
    }
  },
  data () {
    return {
      login: {
        name:'',
        password:''''
      }
    }
  },
  methods: {
    async login () {
      try {
        await this. $Auth.loginWith ('local', {data: this.login})
            .then (response =>{
              console.log (response)
            })
      } catch (err) {
        console.log (err)
      }
    }
  }
}
</script>
What I tried
  • API_URL in .envhttp: // localhost: 8080Change to.
    The URL of the API itself was reflected, but the endpoint set in nuxt.config.js was not reflected.
Supplementary information (FW/tool version, etc.)

IDE intelj idea

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \" Error: no test specified \ "&&exit 1",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ nuxtjs/auth": "latest",
    "@ nuxtjs/axios": "latest",
    "@ nuxtjs/dotenv": "latest",
    "bootstrap": "^ 5.0.0-alpha1",
    "bootstrap-vue": "latest",
    "nuxt": "latest"
  },
  "devDependencies": {
    "@ nuxtjs/google-analytics": "latest",
    "node-sass": "^ 4.14.1",
    "sass-loader": "^ 10.0.1"
  }
}
  • Answer # 1

    It was reflected by pasting the code of the referenced site as it is and changing it for your own site.

    export default {
        mode:'universal',
        auth: {
            redirect: {
                login:'/ login',
                logout:'/ login',
                callback: false,
                home:'/',
            },
            strategies: {
                local: {
                    endpoints: {
                        login: {url:'auth/login', method:'post', propertyName:'token'},
                        user: false,
                        logout: false
                    },
                }
            }
        },
        axios: {
            baseURL: process.env ["API_URL"],
        },
    }