WebService-Boilerplate/src-frontend/main.js
2025-03-11 12:57:45 +07:00

107 lines
2.1 KiB
JavaScript

import {createApp} from 'vue'
import {createPinia} from "pinia";
import './style.scss'
import router from './router'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// Auth
import {createAuth} from "vue-auth3";
import driverAuthBearerToken from "vue-auth3/dist/drivers/auth/bearer-token.js"
import {useAxios} from "./composables/useAxios";
const {client} = useAxios();
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi', // This is already the default value - only for display purposes
},
})
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(vuetify)
app.use(pinia)
registerLayouts(app);
/**
* @description Register all layouts
* @param app
*/
function registerLayouts(app) {
const layouts = import.meta.glob('./layouts/*.vue', {eager: true});
Object.entries(layouts).forEach(([file, layout]) => {
// get file name from file
const fileName = file.split('/').pop().replace('.vue', '');
// register layout
app.component(fileName, layout?.default);
});
}
const auth = createAuth({
rolesKey: "type",
notFoundRedirect: "/",
fetchData: {
url: "/auth/user",
enabled: true,
cache: true,
},
loginData: {
url: "/auth/login",
},
logoutData: {
redirect: "/login",
url: "/auth/logout",
},
refreshToken: {
enabled: false,
},
plugins: {
router,
},
drivers: {
http: {
request: client,
},
auth: driverAuthBearerToken,
},
})
const token = auth.token();
if (token) {
client.defaults.headers.common['Authorization'] = `Bearer ${token}`
}
client.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
auth.logout()
}
return Promise.reject(error)
}
)
app.use(auth)
app.mount('#app')