Vue aplikace pro přístup k API č.4 – Přihlášení ve Vue

4.12.2024 MaMusha Comments 0 Comment

Tento článek je 4 z 8 v seriálu Vue aplikace pro přístup k API

Dneska si uděláme přihlášení do API v naší aplikaci Vue.

Vytvoříme sis servisu pro přihlašování services/auth.js

// services/auth.js
import api from '@/services/api'

class AuthService {
  user = null
  
  async login(credentials) {
    try {
      const response = await api.post('/login', credentials)
      
      if (response.data.success) {
        this.user = response.data.user
        return true
      }
      return false
    } catch (error) {
      console.error('Login error:', error)
      throw error.response?.data?.message || 'Přihlášení se nezdařilo'
    }
  }

  isAuthenticated() {
    return document.cookie.includes('auth_token=')
  }

  getCurrentUser() {
    return this.user
  }

  async register(userData) {
    try {
      const response = await api.post('/register', userData)
      return response.data
    } catch (error) {
      throw error.response?.data?.message || 'Registrace se nezdařila'
    }
  }
}

export default new AuthService()

// services/auth.js

import api from '@/services/api'

class AuthService {

user = null

async login(credentials) {

try {

const response = await api.post('/login', credentials)

if (response.data.success) {

this.user = response.data.user

return true

}

return false

} catch (error) {

console.error('Login error:', error)

throw error.response?.data?.message || 'Přihlášení se nezdařilo'

}

isAuthenticated() {

return document.cookie.includes('auth_token=')

}

getCurrentUser() {

return this.user

}

async register(userData) {

try {

const response = await api.post('/register', userData)

return response.data

} catch (error) {

throw error.response?.data?.message || 'Registrace se nezdařila'

}

export default new AuthService()

a upravíme si Login.vue

<template>
  <div class="login-form">
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="email">Email</label>
        <input
          id="email"
          v-model="email"
          type="email"
          class="form-control"
          required
        >
      </div>

      <div class="form-group">
        <label for="password">Heslo</label>
        <input
          id="password"
          v-model="password"
          type="password"
          class="form-control"
          required
        >
      </div>

      <div v-if="error" class="error-message">
        {{ error }}
      </div>

      <button 
        type="submit" 
        class="submit-btn"
        :disabled="loading"
      >
        {{ loading ? 'Přihlašování...' : 'Přihlásit se' }}
      </button>
    </form>

    <div v-if="debugInfo" class="debug-info">
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script>
import authService from '@/services/auth'

export default {
  name: 'Login',
  data() {
    return {
      email: '',
      password: '',
      loading: false,
      error: null,
      debugInfo: null
    }
  },

  methods: {
    async handleLogin() {
      this.loading = true
      this.error = null
      this.debugInfo = null

      try {
        const success = await authService.login({
          email: this.email,
          password: this.password
        })

        if (success) {
          this.$router.push('/')
        }
      } catch (error) {
        console.error('Chyba:', error)
        this.error = error
        this.debugInfo = {
          error: error.message,
          response: error.response?.data,
          status: error.response?.status
        }
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.login-form {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.error-message {
  color: #dc3545;
  margin-bottom: 16px;
  padding: 8px;
  background-color: #ffd7d7;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.submit-btn:hover:not(:disabled) {
  background-color: #45a049;
}

.debug-info {
  margin-top: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

<label for="email">Email</label>

<input

id="email"

v-model="email"

type="email"

class="form-control"

required

</div>

<label for="password">Heslo</label>

<input

id="password"

v-model="password"

type="password"

class="form-control"

required

</div>

</div>

<button

type="submit"

class="submit-btn"

:disabled="loading"

</button>

</form>

<pre>{{ debugInfo }}</pre>

</div>

</template>

import authService from '@/services/auth'

export default {

name: 'Login',

data() {

return {

email: '',

password: '',

loading: false,

error: null,

debugInfo: null

}

methods: {

async handleLogin() {

this.loading = true

this.error = null

this.debugInfo = null

try {

const success = await authService.login({

email: this.email,

password: this.password

})

if (success) {

this.$router.push('/')

}

} catch (error) {

console.error('Chyba:', error)

this.error = error

this.debugInfo = {

error: error.message,

response: error.response?.data,

status: error.response?.status

}

} finally {

this.loading = false

}

</script>

.login-form {

max-width: 400px;

margin: 40px auto;

padding: 20px;

border: 1px solid #ddd;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 8px;

font-weight: bold;

}

.form-control {

width: 100%;

padding: 8px 12px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

}

.error-message {

color: #dc3545;

margin-bottom: 16px;

padding: 8px;

background-color: #ffd7d7;

border-radius: 4px;

}

.submit-btn {

width: 100%;

padding: 12px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 4px;

font-size: 16px;

cursor: pointer;

}

.submit-btn:disabled {

background-color: #cccccc;

cursor: not-allowed;

}

.submit-btn:hover:not(:disabled) {

background-color: #45a049;

}

.debug-info {

margin-top: 20px;

padding: 10px;

background-color: #f8f9fa;

border: 1px solid #ddd;

border-radius: 4px;

}

pre {

white-space: pre-wrap;

word-wrap: break-word;

}

</style>

Takže, když si nyní spustíme ve Vue login a zadáme uživatele, který v naší databázi opravdu existuje , mělo by přihlášení skončit bez chyby a zároveň bychom v consoli prohlížeče měly vidět vypsané udaje našeho uživatele

Series Navigation<< Vue aplikace pro přístup k API č.3 – Přidáme si do Vue stránkyVue aplikace pro přístup k API č.5 – Zabezpečení stránek pouze pro přihlášené >>

Post Views: 141

Co hledám

co neumím, to se naučím

Vue aplikace pro přístup k API č.4 – Přihlášení ve Vue

4.12.2024 MaMusha Comments 0 Comment

Napsat komentář Zrušit odpověď na komentář