diff --git a/bookmark_front/src/App.vue b/bookmark_front/src/App.vue index ddbbc49..9ae6af4 100644 --- a/bookmark_front/src/App.vue +++ b/bookmark_front/src/App.vue @@ -6,7 +6,7 @@ @@ -17,7 +17,7 @@ body { margin: 0; padding: 0; font-size: 100px; - background-color: @bgColor; + // background-color: @bgColor; height: initial; } #app { diff --git a/bookmark_front/src/router/index.js b/bookmark_front/src/router/index.js index 7fae8a8..3487034 100644 --- a/bookmark_front/src/router/index.js +++ b/bookmark_front/src/router/index.js @@ -1,13 +1,14 @@ import Vue from "vue"; import VueRouter from "vue-router"; import * as vuex from "../store/index.js"; -import { GLOBAL_CONFIG, SUPPORT_NO_LOGIN, TOKEN } from "@/store/modules/globalConfig"; +import { GLOBAL_CONFIG, SUPPORT_NO_LOGIN, TOKEN, setToken } from "@/store/modules/globalConfig"; import { checkJwtValid } from "@/util/UserUtil"; Vue.use(VueRouter); const routes = [ { path: "/", component: () => import("@/views/home/index") }, + { path: "/noHead/addBookmark", component: () => import("@/views/noHead/addBookmark/index") }, { path: "/manage", component: () => import("@/views/manage/index"), @@ -15,7 +16,7 @@ const routes = [ { path: "", redirect: "/manage/bookmarkTree" }, { path: "bookmarkTree", component: () => import("@/views/manage/bookmarkTree/index") }, { path: "personSpace/userInfo", component: () => import("@/views/manage/personSpace/index") }, - { path: "sso", component: () => import("@/views/manage/sso/index") } + { path: "sso/auth", component: () => import("@/views/manage/sso/auth/index") } ] }, { @@ -42,8 +43,12 @@ const router = new VueRouter({ * 在此进行登录信息判断，以及重定向到登录页面 */ router.beforeEach(async (to, from, next) => { - //进入主页面/管理页面时，确认已经进行初始化操作 - if (to.path === "/" || to.path.startsWith("/manage")) { + if (to.query.token && checkJwtValid(to.query.token)) { + console.log("获取到页面token", to.query.token); + await vuex.default.dispatch(GLOBAL_CONFIG + "/" + setToken, to.query.token); + } + //进入除/public以外的路由，确认已经进行初始化操作 + if (!to.path.startsWith("/public")) { await vuex.loginInit(); } let supportNoLogin = to.path === "/" || to.path.startsWith("/public"); diff --git a/bookmark_front/src/store/modules/globalConfig.js b/bookmark_front/src/store/modules/globalConfig.js index 27b2d23..b949ce4 100644 --- a/bookmark_front/src/store/modules/globalConfig.js +++ b/bookmark_front/src/store/modules/globalConfig.js @@ -11,95 +11,100 @@ export const IS_PHONE = "isPhone"; export const noLoginInit = "noLoginInit"; export const loginInit = "loginInit"; +/** + * 登出清除数据 + */ export const clear = "clear"; +/** + * 设置token + */ +export const setToken = "setToken"; /** * 存储全局配置 */ const state = { - /** - * 用户信息 - */ - [USER_INFO]: null, - /** - * token,null说明未获取登录凭证 - */ - [TOKEN]: null, - /** - * 是否已经初始化完成,避免多次重复初始化 - */ - [IS_INIT]: false, - /** - * 是否移动端 - */ - [IS_PHONE]: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent), - /** - * 是否支持未登录进入页面 - */ - [SUPPORT_NO_LOGIN]: false, - /** - * 服务端全局配置 - */ - [SERVER_CONFIG]: {} + /** + * 用户信息 + */ + [USER_INFO]: null, + /** + * token,null说明未获取登录凭证 + */ + [TOKEN]: null, + /** + * 是否已经初始化完成,避免多次重复初始化 + */ + [IS_INIT]: false, + /** + * 是否移动端 + */ + [IS_PHONE]: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent), + /** + * 是否支持未登录进入页面 + */ + [SUPPORT_NO_LOGIN]: false, + /** + * 服务端全局配置 + */ + [SERVER_CONFIG]: {} }; const getters = {}; const actions = { - //未登录需要进行的初始化 - async [noLoginInit] ({ commit }) { - commit(SERVER_CONFIG, await HttpUtil.get("/common/config/global")); - let token = await localforage.getItem(TOKEN); - if (token) { - commit(TOKEN, token); - window.jwtToken = token; - } - }, - //登陆后的，初始化数据 - async [loginInit] (context) { - if (context.state.isInit) { - return; - } - let userInfo = await HttpUtil.get("/user/currentUserInfo"); - context.commit(USER_INFO, userInfo); - context.commit(IS_INIT, true); - }, - async setToken ({ commit }, token) { - await localforage.setItem(TOKEN, token); - window.jwtToken = token; - commit(TOKEN, token); - }, - //登出清除数据 - async [clear] (context) { - await localforage.removeItem(TOKEN); - context.commit(USER_INFO, null); - context.commit(TOKEN, null); - context.commit(IS_INIT, false); - }, + //未登录需要进行的初始化 + async [noLoginInit]({ commit }) { + commit(SERVER_CONFIG, await HttpUtil.get("/common/config/global")); + let token = await localforage.getItem(TOKEN); + if (token) { + commit(TOKEN, token); + window.jwtToken = token; + } + }, + //登陆后的，初始化数据 + async [loginInit](context) { + if (context.state.isInit) { + return; + } + let userInfo = await HttpUtil.get("/user/currentUserInfo"); + context.commit(USER_INFO, userInfo); + context.commit(IS_INIT, true); + }, + async [setToken]({ commit }, token) { + await localforage.setItem(TOKEN, token); + window.jwtToken = token; + commit(TOKEN, token); + }, + async [clear](context) { + await localforage.removeItem(TOKEN); + context.commit(USER_INFO, null); + context.commit(TOKEN, null); + context.commit(IS_INIT, false); + } }; const mutations = { - [USER_INFO] (state, userInfo) { - state[USER_INFO] = userInfo; - }, - [TOKEN] (state, token) { - state[TOKEN] = token; - }, - [IS_INIT] (state, isInit) { - state[IS_INIT] = isInit; - }, - [SERVER_CONFIG] (state, serverConfig) { - state[SERVER_CONFIG] = serverConfig; - }, - [SUPPORT_NO_LOGIN] (state, val) { - state[SUPPORT_NO_LOGIN] = val; - } + [USER_INFO](state, userInfo) { + state[USER_INFO] = userInfo; + }, + [TOKEN](state, token) { + state[TOKEN] = token; + }, + [IS_INIT](state, isInit) { + state[IS_INIT] = isInit; + }, + [SERVER_CONFIG](state, serverConfig) { + state[SERVER_CONFIG] = serverConfig; + }, + [SUPPORT_NO_LOGIN](state, val) { + state[SUPPORT_NO_LOGIN] = val; + } }; - export const store = { - namespaced: true, - state, - getters, - actions, - mutations + namespaced: true, + state, + getters, + actions, + mutations }; diff --git a/bookmark_front/src/views/manage/sso/index.vue b/bookmark_front/src/views/manage/sso/auth/index.vue similarity index 100% rename from bookmark_front/src/views/manage/sso/index.vue rename to bookmark_front/src/views/manage/sso/auth/index.vue diff --git a/bookmark_front/src/views/noHead/addBookmark/index.vue b/bookmark_front/src/views/noHead/addBookmark/index.vue new file mode 100644 index 0000000..5961dfa --- /dev/null +++ b/bookmark_front/src/views/noHead/addBookmark/index.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/浏览器插件/bookmarkBrowserPlugin/background.js b/浏览器插件/bookmarkBrowserPlugin/background.js index 92747d0..0cbee6b 100644 --- a/浏览器插件/bookmarkBrowserPlugin/background.js +++ b/浏览器插件/bookmarkBrowserPlugin/background.js @@ -1,44 +1,42 @@ -chrome.contextMenus.create( - { - title: '添加到书签', - id: "addBookmark", - }, - () => console.log("创建右键菜单成功") -); +chrome.runtime.onInstalled.addListener(() => { + chrome.contextMenus.create( + { + title: '添加到书签', + id: "addBookmark", + }, + () => console.log("创建右键菜单成功") + ); +}); + chrome.contextMenus.onClicked.addListener(async function (info, tab) { console.log(info, tab); let body = { - path: "", name: tab.title, url: tab.url, - type: 0, iconUrl: tab.favIconUrl }; sendToContent(tab.id, { code: "addBookmark", data: body, token: await getVal("token") }); -}) +}); - -/** - * 构建一个标准命令 - * @param {*} code code - * @param {*} data data - */ -function createMsg (code, data) { - return JSON.stringify({ code, data }); -} - -// 接收content发送的消息 +// 接收content/popup发送的消息 chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => { - if (!data.code) { + if (!data.code || !data.receiver == 'background') { return; } - console.log("收到content发送消息：", data); + sendResponse("ok"); + console.log("收到消息：", data, sender); if (data.code == 'setToken') { - setVal("token", data.data); - sendResponse({ code: "setTokenOk" }); + await setVal("token", data.data); + // sendToContent + await sendToContent(sender.tab.id, { code: "setTokenOk" }); + } else if (data.code == 'getToken') { + let token = await getVal("token"); + sendToPopup({ code: "setToken", data: await getVal("token") }); + } else if (data.code == "clearToken") { + await clearVal("token"); } }) @@ -49,11 +47,27 @@ chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => { */ function sendToContent (tabId, data) { console.log(tabId, data); + data.receiver = "content"; chrome.tabs.sendMessage(tabId, data, res => { console.log("接受响应", res); }) } +/** + * 向popup发送消息 + * @param {*} data + */ +function sendToPopup (data) { + data.receiver = "popup"; + chrome.runtime.sendMessage(data, res => console.log(res)); +} + +/** + * 设置值 + * @param {*} key + * @param {*} val + * @returns + */ function setVal (key, val) { return new Promise((resolve, reject) => { chrome.storage.local.set({ [key]: val }, function () { @@ -63,6 +77,11 @@ function setVal (key, val) { }) } +/** + * 获取值 + * @param {*} key + * @returns + */ function getVal (key) { return new Promise((resolve, reject) => { chrome.storage.local.get([key], function (res) { @@ -70,4 +89,13 @@ function getVal (key) { resolve(res[key]); }) }) +} + +function clearVal (key) { + return new Promise((resolve, reject) => { + chrome.storage.local.remove(key, function () { + console.log("remove成功", key); + resolve(); + }) + }) } \ No newline at end of file diff --git a/浏览器插件/bookmarkBrowserPlugin/popup/index.html b/浏览器插件/bookmarkBrowserPlugin/popup/index.html index dc91dd8..a3b8ae9 100644 --- a/浏览器插件/bookmarkBrowserPlugin/popup/index.html +++ b/浏览器插件/bookmarkBrowserPlugin/popup/index.html @@ -7,8 +7,8 @@ - 点击登录 + 点击登录 +

diff --git a/浏览器插件/bookmarkBrowserPlugin/popup/index.js b/浏览器插件/bookmarkBrowserPlugin/popup/index.js index e99c117..5869476 100644 --- a/浏览器插件/bookmarkBrowserPlugin/popup/index.js +++ b/浏览器插件/bookmarkBrowserPlugin/popup/index.js @@ -1,2 +1,49 @@ console.log("asdf"); -console.log(bookmarkHost); \ No newline at end of file +console.log(bookmarkHost); + +var token; +var login = document.getElementById("login"); +var action = document.getElementById("action"); + +(async () => { + //初始化 + login.href = bookmarkHost + "/manage/sso/auth"; + sendToBg("getToken", null); +})(); + +/** + * 退出登陆 + */ +document.getElementById("logout").addEventListener("click", () => { + console.log("click"); + sendToBg("clearToken", null); + action.style.display = "none"; + login.style.display = "block"; +}); + +/** + * 发送消息到后台 + * @param {*} data + */ +function sendToBg (code, data) { + chrome.runtime.sendMessage({ code, data, receiver: "background" }, res => console.log(res)); +} + + +// 接收content/background发送的消息 +chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => { + if (!data.code || !data.receiver == 'popup') { + return; + } + sendResponse("ok"); + console.log("popup收到消息：", data); + if (data.code == 'setToken') { + token = data.data; + if (token) { + action.style.display = "block"; + login.style.display = "none"; + } else { + login.style.display = "block"; + } + } +}) \ No newline at end of file diff --git a/浏览器插件/bookmarkBrowserPlugin/static/js/content.js b/浏览器插件/bookmarkBrowserPlugin/static/js/content.js index 6cadb99..bfa2cb4 100644 --- a/浏览器插件/bookmarkBrowserPlugin/static/js/content.js +++ b/浏览器插件/bookmarkBrowserPlugin/static/js/content.js @@ -1,59 +1,88 @@ console.log('注入了页面'); +var bookmarkInfo = null; +var addBlockDiv = null; +var iframe = null; + /** * 接收当前注入页面传来的消息 */ window.addEventListener('message', function (event) { + console.log(event); if (event.data.code === undefined) { return; } console.log('接受到网页消息:', event.data); - sendToBg(event.data); + if (event.data.code === 'getBookmarkData') { + iframe.contentWindow.postMessage({ code: "addBookmarkAction", data: bookmarkInfo }, "*"); + } else if (event.data.code === 'setToken') { + sendToBg(event.data); + } else if (event.data.code == 'closeIframe') { + addBlockDiv.remove(); + } }); /** - * 接收background发送的消息 + * 接收content/background发送的消息 */ -chrome.runtime.onMessage.addListener((data, sender, sendResponse) => dealBgMessage(data)); +chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => { + if (!data || !data.code || data.receiver != "content") { + return; + } + sendResponse("ok"); + console.log('收到消息：', data); + if (data.code == 'setTokenOk') { + sendToPage(data); + } else if (data.code == 'addBookmark') { + await addBookmark(data); + } +}); + +async function addBookmark (data) { + if (!checkTokenValid(data.token)) { + alert("登陆失效，请登陆后，重试"); + window.open(bookmarkHost + "/manage/sso/auth"); + return; + } + //新增书签 + try { + if (data.data.iconUrl) { + let icon = await axios.get(data.data.iconUrl, { responseType: 'arraybuffer' }); + data.data.icon = `data:` + icon.headers['content-type'] + ';base64,' + window.btoa(String.fromCharCode(...new Uint8Array(icon.data))); + } + } catch (error) { + console.error(error); + } + console.log("新增书签", data.data); + bookmarkInfo = data.data; + + addBlockDiv = document.createElement("div"); + addBlockDiv.setAttribute("style", "position:fixed;width:100%;height:100vh;z-index:100000;left:0;top:0;background:rgba(211, 211, 205, 0.8)"); + document.getElementsByTagName("body")[0].appendChild(addBlockDiv); + iframe = document.createElement("iframe"); + iframe.src = bookmarkHost + "/noHead/addBookmark?token=" + data.token; + iframe.setAttribute("style", "width:70%;min-height:60vh;margin-left:15%;margin-top:10vh;padding:0.3em;"); + addBlockDiv.appendChild(iframe); +} /** * 发送消息给bg * @param {*} data */ function sendToBg (data) { - chrome.runtime.sendMessage(data, response => dealBgMessage(response)); + data.receiver = "background"; + chrome.runtime.sendMessage(data, response => { + console.log(response); + }); } -/** - * 处理后台发送的消息 - */ -async function dealBgMessage (data) { - if (!data || !data.code) { - return; - } - console.log('收到来自bg的回复：', data); - if (data.code == 'setTokenOk') { - sendToPage(data); - } else if (data.code == 'addBookmark') { - if (!checkTokenValid(data.token)) { - alert("登陆失效，请登陆后，重试"); - window.open(bookmarkHost + "/manage/sso"); - return; - } - //新增书签 - let icon = await axios.get(data.data.iconUrl, { responseType: 'arraybuffer' }); - data.data.icon = `data:` + icon.headers['content-type'] + ';base64,' + window.btoa(String.fromCharCode(...new Uint8Array(icon.data))); - await axios.put("/bookmark", data.data); - } -} - - /** * 发消息到页面 * @param {*} data */ function sendToPage (data) { + data.receiver = "page"; window.postMessage(data, "*"); }