Probindo/freekake_web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove storage

Browse Source
This commit is contained in:
='fauz 2025-10-31 14:34:39 +07:00
parent 5ff6d290ad
commit 5a9b3ba561
3 changed files with 97 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/router/index.js
View File

@ -52,8 +52,12 @@ const router = createRouter({
router.beforeEach(async(to, from, next) => { router.beforeEach(async(to, from, next) => {
const auth = useAuthStore(); const auth = useAuthStore();
if (!auth.isLoggedIn) { if (!auth.user) {
// auth.restoreSession(); const restored = auth.restoreSession();
if(restored){
await auth.fetchUser();
}
try { try {
await auth.fetchUser(); await auth.fetchUser();
} catch (e) { } catch (e) {
@ -67,13 +71,13 @@ router.beforeEach(async(to, from, next) => {
// if(to.meta.requiresAuth && !isLoggedIn) { // if(to.meta.requiresAuth && !isLoggedIn) {
// return next('/login'); // return next('/login');
// } // }
// if (to.path === '/login' && isLoggedIn) { if (to.path === '/login' && isLoggedIn) {
// return next('/') return next('/')
// } }
// if (to.meta.requiresAuth && !isLoggedIn) { if (to.meta.requiresAuth && !isLoggedIn) {
// return next("/login"); return next("/login");
// } }
return next(); return next();
}); });

81
src/stores/auth.js
View File

@ -1,5 +1,6 @@
import {defineStore} from "pinia"; import {defineStore} from "pinia";
import axios from "axios"; import axios from "axios";
import api from '@/util/api'
export const useAuthStore = defineStore('auth', { export const useAuthStore = defineStore('auth', {
state: () => ({ state: () => ({
@ -11,8 +12,7 @@ export const useAuthStore = defineStore('auth', {
user: null user: null
}), }),
getters: { getters: {
isLoggedIn: (state) => !!state.user, isLoggedIn: (state) => !!state.token && !!state.user,
// isLoggedIn: (state) => !!state.token && !!state.user,
}, },
actions: { actions: {
async register(username, password, re_password) { async register(username, password, re_password) {
@ -38,41 +38,47 @@ export const useAuthStore = defineStore('auth', {
}) })
const { access_token, refresh_token } = response.data; const { access_token, refresh_token } = response.data;
const user = await axios.get(this.baseUrl + '/auth/users/me', { // const user = await axios.get(this.baseUrl + '/auth/users/me', {
headers: { // headers: {
Authorization: `Bearer ${access_token}` // Authorization: `Bearer ${access_token}`
} // }
}).then(res => res.data) // }).then(res => res.data)
this.refresh_token = refresh_token this.refresh_token = refresh_token
this.token = access_token this.token = access_token
this.user = user // this.user = user
await this.fetchUser(); const user = await this.fetchUser();
console.log(user)
// localStorage.setItem('token', this.token) // localStorage.setItem('token', this.token)
// localStorage.setItem('user', JSON.stringify(user)) // localStorage.setItem('user', JSON.stringify(user))
}, },
async fetchUser() { async fetchUser() {
console.log("Token :", this.token)
if (!this.token) return false;
try { try {
const res = await axios.get(`${this.baseUrl}/auth/users/me`, { const res = await api.get(`/auth/users/me`, {
headers: { withCredentials: true,
Authorization: `Bearer ${this.token}`, headers: {
}, Authorization: `Bearer ${this.token}`
withCredentials: true, }
}); });
this.user = res.data; this.user = res.data;
return true;
} catch (err) { } catch (err) {
console.error("❌ fetch user failed", err); console.error("Fetch user failed", err);
this.user = null; this.user = null;
} }
}, },
async logout() { async logout() {
if(this.token){ if(this.token){
await axios.post(this.baseUrl + '/oauth/revoke_token/', { const body = new URLSearchParams();
token: this.token, body.append("token", this.token);
client_id: this.clientId, body.append("client_id", this.clientId);
client_secret: this.clientSecret body.append("client_secret", this.clientSecret);
},
await axios.post(this.baseUrl + '/oauth/revoke_token/',
body.toString(),
{ {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
withCredentials:true withCredentials:true
@ -83,15 +89,48 @@ export const useAuthStore = defineStore('auth', {
this.token = null; this.token = null;
this.user = null; this.user = null;
this.refresh_token = null;
// localStorage.removeItem('token') // localStorage.removeItem('token')
// localStorage.removeItem('user') // localStorage.removeItem('user')
}, },
async restoreSession() { async restoreSession() {
try { try {
if (!this.token && this.refresh_token) {
await this.refreshToken();
}
await this.fetchUser(); await this.fetchUser();
} catch { } catch {
console.log("No active session found."); console.log("No active session.");
}
},
async refreshToken() {
try {
const form = new URLSearchParams();
form.append("grant_type", "refresh_token");
form.append("refresh_token", this.refresh_token);
form.append("client_id", this.clientId);
form.append("client_secret", this.clientSecret);
const response = await axios.post(
`${this.baseUrl}/oauth/token/`,
form.toString(),
{
headers: { "Content-Type": "application/x-www-form-urlencoded" },
withCredentials: true,
}
);
this.token = response.data.access_token;
this.refresh_token = response.data.refresh_token;
return true;
} catch (e) {
this.token = null;
this.user = null;
return false;
} }
} }
} }
}) })

40
src/util/api.js
View File

@ -12,36 +12,46 @@ const api = axios.create({
api.interceptors.request.use( api.interceptors.request.use(
config =>{ config =>{
const token = localStorage.getItem('token') const auth = useAuthStore()
if(token){ if(auth.token){
config.headers.Authorization = `Bearer ${token}` config.headers.Authorization = `Bearer ${auth.token}`
} }
return config return config
} },
error => Promise.reject(error)
) )
api.interceptors.response.use( api.interceptors.response.use(
response => response, response => response,
async error => { async error => {
const originalRequest = error.config;
const auth = useAuthStore(); const auth = useAuthStore();
const originalRequest = error.config;
if(error.response && error.response.status === 401 && !originalRequest._retry){ if(error.response && error.response.status === 401 && !originalRequest._retry){
originalRequest._retry =true; originalRequest._retry =true;
try { const success = await auth.refreshToken();
const res = await axios.post(`${this.baseURL}` + "/oauth/token/refresh/", {},{withCredentials:true}); if(success){
auth.token = res.data.access_token;
originalRequest.headers.Authorization = `Bearer ${auth.token}`; originalRequest.headers.Authorization = `Bearer ${auth.token}`;
return api(originalRequest);
}
await auth.logout();
window.location = "/login";
// try {
// const res = await axios.post(`${this.baseURL}` + "/oauth/token/refresh/", {},{withCredentials:true});
// auth.token = res.data.access_token;
// originalRequest.headers.Authorization = `Bearer ${auth.token}`;
// error.config.headers.Authorization = `Bearer ${res.data.access}`; // error.config.headers.Authorization = `Bearer ${res.data.access}`;
// return api.request(error.config); // return api.request(error.config);
return api(originalRequest) // return api(originalRequest)
} catch (refreshError) { // } catch (refreshError) {
// jika refresh juga gagal, logout // jika refresh juga gagal, logout
window.location = "/login"; // window.location = "/login";
auth.logout(); // auth.logout();
return Promise.reject(refreshError) // return Promise.reject(refreshError)
} // }
} }
return Promise.reject(error) return Promise.reject(error)
} }