feature: refresh token. if not logged in then refresh token; else redirect to login page.
This commit is contained in:
Cindy Chang
@@ -1,7 +1,7 @@
|
||||
import { createRouter, createWebHistory, } from "vue-router";
|
||||
import AuthContainer from '@/views/AuthContainer.vue';
|
||||
import MainContainer from '@/views/MainContainer.vue';
|
||||
import Login from '@/views/Login/index.vue';
|
||||
import Login from '@/views/Login/Login.vue';
|
||||
import Files from '@/views/Files/index.vue';
|
||||
import Upload from '@/views/Upload/index.vue';
|
||||
import Map from '@/views/Discover/Map/index.vue';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { defineStore } from "pinia";
|
||||
import axios from 'axios';
|
||||
import apiError from '@/module/apiError.js';
|
||||
import { deleteCookie, setCookie } from "../utils/cookieUtil";
|
||||
import { deleteCookie, setCookie, getCookie } from "../utils/cookieUtil";
|
||||
|
||||
export default defineStore('loginStore', {
|
||||
// data, methods, computed
|
||||
@@ -11,13 +11,13 @@ export default defineStore('loginStore', {
|
||||
grant_type: 'password', // password | refresh_token
|
||||
username: '',
|
||||
password: '',
|
||||
refresh_token: ''
|
||||
refresh_token: undefined,
|
||||
},
|
||||
isInvalid: false,
|
||||
userData: {},
|
||||
isLoggedIn: false,
|
||||
rememberedReturnToUrl: "",
|
||||
// expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
|
||||
expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
|
||||
}),
|
||||
actions: {
|
||||
/**
|
||||
@@ -35,10 +35,10 @@ export default defineStore('loginStore', {
|
||||
try {
|
||||
const response = await axios.post(api, this.auth, config);
|
||||
const accessToken = response.data.access_token;
|
||||
const refreshToken = response.data.refresh_token;
|
||||
const refresh_token = response.data.refresh_token;
|
||||
// 將 token 儲存在 cookie
|
||||
document.cookie = `luciaToken=${accessToken}`;
|
||||
// document.cookie = `luciaRefreshToken=${refreshToken};expires=${new Date(this.expired)};`;
|
||||
document.cookie = `luciaRefreshToken=${refresh_token};expires=${new Date(this.expired)};`;
|
||||
|
||||
this.isLoggedIn = true;
|
||||
setCookie("isLuciaLoggedIn", "true");
|
||||
@@ -57,27 +57,31 @@ export default defineStore('loginStore', {
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Refresh Token (暫時沒做)
|
||||
* Refresh Token
|
||||
*/
|
||||
async refreshTokenLogin() {
|
||||
async refreshToken() {
|
||||
console.log('TODO:TODO:', this.auth);
|
||||
const api = '/api/oauth/token';
|
||||
const refreshToken = document.cookie.replace(/(?:(?:^|.*;\s*)luciaRefreshToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
|
||||
this.auth.grant_type = 'refresh_token';
|
||||
this.auth.refresh_token = refreshToken;
|
||||
this.auth.refresh_token = getCookie("luciaRefreshToken");
|
||||
|
||||
// try {
|
||||
// const response = await axios.post(api, this.auth, config);
|
||||
// const newAccessToken = response.data.access_token;
|
||||
// const newRefreshToken = response.data.refresh_token;
|
||||
try {
|
||||
const response = await axios.post(api, this.auth, config);
|
||||
console.log('response', response);
|
||||
if(response.status === 200) {
|
||||
const newAccessToken = response.data.access_token;
|
||||
const newRefreshToken = response.data.refresh_token;
|
||||
|
||||
// document.cookie = `luciaToken=${newAccessToken}`;
|
||||
// document.cookie = `luciaRefreshToken=${newRefreshToken};expires=${this.expired}`;
|
||||
document.cookie = `luciaToken=${newAccessToken}`;
|
||||
document.cookie = `luciaRefreshToken=${newRefreshToken};expires=${this.expired}`;
|
||||
|
||||
// defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
|
||||
// } catch(error) {
|
||||
// this.$router.push('/login');
|
||||
// }
|
||||
defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
|
||||
}
|
||||
} catch(error) {
|
||||
// 若refresh token 失敗則導向至登入頁面
|
||||
this.$router.push('/login');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Logout, tooken expired
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
export function getCookie(name) {
|
||||
const nameEQ = name + "=";
|
||||
const ca = document.cookie.split(';');
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
const nameEqual = name + "=";
|
||||
const cookieArr = document.cookie.split(';');
|
||||
for (let i = 0; i < cookieArr.length; i++) {
|
||||
let c = cookieArr[i];
|
||||
while (c.charAt(0) === ' ') {
|
||||
c = c.substring(1, c.length);
|
||||
}
|
||||
if (c.indexOf(nameEQ) === 0) {
|
||||
return c.substring(nameEQ.length, c.length);
|
||||
if (c.indexOf(nameEqual) === 0) {
|
||||
return c.substring(nameEqual.length, c.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function setCookie(name, value, days=1) {
|
||||
export function setCookie(name, value, days=1) {
|
||||
let expires = "";
|
||||
if (days) {
|
||||
const date = new Date();
|
||||
@@ -21,9 +21,13 @@ export function getCookie(name) {
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
}
|
||||
}
|
||||
|
||||
export function deleteCookie(name, path = '/') {
|
||||
export function setCookieWithoutExpiration(name, value) {
|
||||
document.cookie = name + "=" + (value || "");
|
||||
}
|
||||
|
||||
export function deleteCookie(name, path = '/') {
|
||||
document.cookie = name + '=; Max-Age=-99999999; path=' + path;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,9 +33,11 @@ export default {
|
||||
const allMapDataStore = AllMapDataStore();
|
||||
const conformanceStore = ConformanceStore();
|
||||
const pageAdminStore = PageAdminStore();
|
||||
const loginStore = LoginStore();
|
||||
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
|
||||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
||||
const router = useRouter();
|
||||
const { isLoggedIn, auth } = storeToRefs(loginStore);
|
||||
|
||||
const setHighlightedNavItemOnLanding = () => {
|
||||
const currentPath = router.currentRoute.value.path;
|
||||
@@ -72,6 +74,7 @@ export default {
|
||||
]),
|
||||
...mapState(LoginStore, [
|
||||
'isLoggedIn',
|
||||
'auth',
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
@@ -81,21 +84,44 @@ export default {
|
||||
'clearShouldKeepPreviousPageBoolean',
|
||||
'setActivePageComputedByRoute',
|
||||
],),
|
||||
...mapActions(LoginStore, [
|
||||
'refreshToken',
|
||||
],),
|
||||
},
|
||||
created() {
|
||||
// Save token in Headers.
|
||||
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
// 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
|
||||
if (!getCookie("isLuciaLoggedIn")) {
|
||||
// PSEUDOCODE
|
||||
// if (not logged in) {
|
||||
// if (has refresh token) {
|
||||
// refresh_token();
|
||||
// if (refresh failed) {
|
||||
// go to log in();
|
||||
// } else {
|
||||
// cookie add("refresh_token=" + refresh_token "; expire=****")
|
||||
// }
|
||||
// } else {
|
||||
// go to log in();
|
||||
// }
|
||||
// }
|
||||
beforeRouteEnter(to, from, next) {
|
||||
const loginStore = LoginStore();
|
||||
|
||||
if (!loginStore.isLoggedIn) {
|
||||
if (getCookie('luciaRefreshToken')) {
|
||||
loginStore.refreshToken();
|
||||
} else {
|
||||
next({
|
||||
path: '/login',
|
||||
query: {
|
||||
// 記憶未來登入後要進入的網址，且記憶的時候要用base64編碼包裹住
|
||||
'return-to': btoa(window.location.href),
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user