FEAT: Create auth method in Vue

📃 Description 📃:

Create auth method in Vue;

✅ Checklist ✅:

[x] You can read the tutorial of Eduardo da Silva;
[x] Link: https://eduardo-da-silva.github.io/aula-desenvolvimento-mobile/autenticacao/configuracao-passage;
[x] Passage component and packages has been installed;
[x] Make auth service;
[x] Make auth store;
[x] Make auth method, example: getUserInfo;
[x] Use @vueuse/core for save data of user in localstorage;
[x] Save in one field the type of user, driver, employe and client;
[x] Save in one if user is staff, to employe for example;
[x] Commit;
[x] Open pull request;

⚠️ Notes (IMPORTANT) ⚠️:

Create your branch with the name Feat-(number of your branch), based on the dev branch (ALWAYS based on dev);
Branch Dev and Main have a protection rule, so nobody can commit to these branches (except me);
When it is make your commit, use #Issue-Number, to you reference you issue;
After you finish your task, check the checklist, move your task to "In Review" in the Kanban Project;
In the end, make a pull request to Dev;
NÃO É PERMITIDO MACAQUISSE

🗂️ Archives 🗂️:

Eduardo da Silva Tutorial:

https://eduardo-da-silva.github.io/aula-desenvolvimento-mobile/autenticacao/configuracao-passage

Service Example:
```
import axios from 'axios';
```

export default class AuthService { async postUserToken(token) { const response = await axios.get('/users/me/', { headers: { Authorization: Bearer ${token}, }, }); return response.data; } }

- Store Example: 
```js
import { ref } from 'vue';
import { defineStore } from 'pinia';

import AuthService from '@/services/auth';
const authService = new AuthService();

export const useAuthStore = defineStore('auth', () => {
  const user = ref({});

  async function setToken(token) {
    user.value = await authService.postUserToken(token);
  }

  function unsetToken() {
    user.value = {};
  }

  return { user, setToken, unsetToken };
});

HomeView Example:

<script setup>
import ProductList from '@/components/ProductList.vue';

import { onMounted } from 'vue';
import { PassageUser } from '@passageidentity/passage-elements/passage-user';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();

const getUserInfo = async () => {
  try {
    const authToken = localStorage.getItem('psg_auth_token');
    const passageUser = new PassageUser(authToken);
    const user = await passageUser.userInfo(authToken);
    if (user) {
      await authStore.setToken(authToken);
    } else {
      authStore.unsetToken();
    }
  } catch (error) {
    authStore.unsetToken();
  }
};

onMounted(() => {
  getUserInfo();
});
</script>

<template>
  <product-list />
</template>

plugin/axios.js:


import axios from 'axios';

const api = axios.create({
  baseURL: 'http://127.0.0.1:8000/'
})

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('psg_auth_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

HackHeaders / FrontEnd

FEAT: Create auth method in Vue #43