Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <form @submit.prevent="handleLogin">
- <label class="label" v-text="labels.user"></label>
- <p :class="controlClass">
- <input
- :class="inputClass"
- type="text"
- :placeholder="userPlaceholder"
- v-model="login.user"
- >
- </p>
- <label class="label" v-text="labels.password"></label>
- <p :class="controlClass">
- <input
- :class="inputClass"
- type="password"
- :placeholder="passwordPlaceholder"
- v-model="login.password"
- >
- </p>
- <p class="control">
- <button
- type="submit"
- class="button is-primary"
- v-text="labels.button"
- :disabled="loading"
- ></button>
- </p>
- </form>
- </template>
- <script>
- import axios from 'axios'
- export default {
- name: 'VuePassportLogin',
- props: {
- labels: {
- type: Object,
- default () {
- return {
- title: 'Login',
- user: 'User',
- password: 'Password',
- button: 'Login'
- }
- }
- },
- userPlaceholder: String,
- passwordPlaceholder: String,
- controlClass: {
- type: String,
- default: 'control'
- },
- inputClass: {
- type: String,
- default: 'input'
- },
- apiUrl: {
- type: String,
- required: true
- },
- loginRoute: {
- type: String,
- default: 'oauth/token'
- },
- userRoute: {
- type: String,
- default: 'api/user'
- },
- clientId: {
- type: [Number, String],
- default: 2
- },
- secret: {
- type: String,
- required: true
- }
- },
- data () {
- return {
- loading: false,
- login: {
- user: '',
- password: ''
- }
- }
- },
- computed: {
- loginUrl () {
- return `${this.apiUrl}/${this.loginRoute}`
- },
- userUrl () {
- return `${this.apiUrl}/${this.userRoute}`
- }
- },
- methods: {
- getHeaders (token) {
- return {
- 'Accept': 'application/json',
- 'Authorization': `Bearer ${token}`
- }
- },
- handleLogin () {
- this.loading = true
- const postData = {
- grant_type: 'password',
- client_id: this.clientId,
- client_secret: this.secret,
- username: this.login.user,
- password: this.login.password,
- scope: ''
- }
- const authUser = {}
- axios.post(this.loginUrl, postData)
- .then(response => {
- authUser.access_token = response.data.access_token
- authUser.refresh_token = response.data.refresh_token
- const headers = this.getHeaders(authUser.access_token)
- axios.get(this.userUrl, {headers})
- .then(response => {
- authUser.data = response.data
- this.$emit('success', { authUser, headers })
- this.loading = false
- })
- .catch(error => {
- this.$emit('failed', error)
- this.loading = false
- })
- })
- .catch(error => {
- this.$emit('failed', error)
- this.loading = false
- })
- }
- }
- }
- </script>
Add Comment
Please, Sign In to add comment