feat: add login in frontend

* extract icon library from main.js
* extract router from main.js
* failure with error in passport
* add example to swagger

app/src/utils/api.js

@@ -2,6 +2,17 @@ import axios from 'axios'
 
 const api = axios.create({
   baseURL: '/api/v1',
+  headers: {
+    'Content-Type': 'application/json',
+  },
 })
 
+export const setToken = (token) => {
+  if (token) {
+    api.defaults.headers.common.Authorization = `Bearer ${token}`
+  } else {
+    delete api.defaults.headers.common.Authorization
+  }
+}
+
 export default api

app/src/utils/auth.js

@@ -0,0 +1,47 @@
+import { computed, ref, watch } from 'vue'
+import api, { setToken } from './api'
+
+const TOKEN_KEY = 'JWT_TOKEN'
+
+const myStorage = window.localStorage
+const myToken = ref(myStorage.getItem(TOKEN_KEY))
+
+if (myToken.value) {
+  setToken(myToken.value)
+}
+
+// watch the token and store it in localStorage
+watch(myToken, (newToken) => {
+  if (newToken) {
+    console.log('update token:', newToken)
+    myStorage.setItem(TOKEN_KEY, newToken)
+    setToken(newToken)
+  } else {
+    myStorage.removeItem(TOKEN_KEY)
+    setToken(null)
+  }
+})
+
+export const getToken = () => {
+  return myToken.value
+}
+
+export const login = async (username, password) => {
+  try {
+    const res = await api.post('/auth/login', { username, password })
+    const { token } = res.data
+    myToken.value = token
+    return true
+  } catch (err) {
+    if (err.response?.status === 401) {
+      return false
+    }
+    throw err
+  }
+}
+
+export const logout = () => {
+  myToken.value = null
+}
+
+export const isAuthenticated = computed(() => !!myToken.value)

app/src/utils/socket.js

@@ -1,5 +1,7 @@
 import io from 'socket.io-client'
 
+import { getToken } from './auth'
+
 class SocketWrapper {
   constructor() {
     this.socket = null
@@ -16,6 +18,9 @@ class SocketWrapper {
       query: {
         session_id: session._id,
       },
+      auth: {
+        token: getToken(),
+      },
     })
 
     this.socket.on('connect', () => {