fanxb/bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

temp

Browse Source
This commit is contained in:
fanxb 2022-04-12 17:04:48 +08:00
parent 1ba7617165
commit 90b1dbcf9f
9 changed files with 313 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bookmark_front/src/App.vue
View File

@ -6,7 +6,7 @@
<script>
export default {
name: "App",
name: "App"
};
</script>
@ -17,7 +17,7 @@ body {
margin: 0;
padding: 0;
font-size: 100px;
background-color: @bgColor;
// background-color: @bgColor;
height: initial;
}
#app {

13
bookmark_front/src/router/index.js
View File

@ -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");

51
bookmark_front/src/store/modules/globalConfig.js
View File

@ -11,7 +11,14 @@ export const IS_PHONE = "isPhone";
export const noLoginInit = "noLoginInit";
export const loginInit = "loginInit";
/**
* 登出清除数据
*/
export const clear = "clear";
/**
* 设置token
*/
export const setToken = "setToken";
/**
* 存储全局配置
*/
@ -46,7 +53,7 @@ const getters = {};
const actions = {
//未登录需要进行的初始化
async [noLoginInit] ({ commit }) {
async [noLoginInit]({ commit }) {
commit(SERVER_CONFIG, await HttpUtil.get("/common/config/global"));
let token = await localforage.getItem(TOKEN);
if (token) {
@ -55,7 +62,7 @@ const actions = {
}
},
//登陆后的，初始化数据
async [loginInit] (context) {
async [loginInit](context) {
if (context.state.isInit) {
return;
}
@ -63,38 +70,36 @@ const actions = {
context.commit(USER_INFO, userInfo);
context.commit(IS_INIT, true);
},
async setToken ({ commit }, token) {
async [setToken]({ commit }, token) {
await localforage.setItem(TOKEN, token);
window.jwtToken = token;
commit(TOKEN, token);
},
//登出清除数据
async [clear] (context) {
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;
}
};
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;
}
};
export const store = {
namespaced: true,

0
bookmark_front/src/views/manage/sso/index.vue → bookmark_front/src/views/manage/sso/auth/index.vue
View File

56
bookmark_front/src/views/noHead/addBookmark/index.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div class="ssoAddBookmark">正在添加，请稍后！！！</div>
</template>
<script>
import HttpUtil from "@/util/HttpUtil";
export default {
data() {
return {
form: {
icon: null,
name: null,
url: null,
type: 0,
path: ""
}
};
},
mounted() {
window.addEventListener("message", event => {
if (!event.data.code) {
return;
}
console.log("收到content消息", event);
if (event.data.code == "addBookmarkAction") {
console.log("新增书签");
this.form.icon = event.data.data.icon ? event.data.data.icon : null;
this.form.name = event.data.data.name;
this.form.url = event.data.data.url;
this.addBookmark();
}
});
console.log("向父节点获取数据");
window.parent.postMessage({ code: "getBookmarkData", receiver: "content" }, "*");
},
methods: {
closeIframe() {
window.parent.postMessage({ code: "closeIframe", receiver: "content" }, "*");
},
//新增书签
async addBookmark() {
let res = await HttpUtil.put("/bookmark", null, this.form);
this.$message.success("添加成功");
// setTimeout(this.closeIframe, 2000);
}
}
};
</script>
<style lang="less" scoped>
.ssoAddBookmark {
display: flex;
justify-content: center;
align-items: center;
}
</style>

68
浏览器插件/bookmarkBrowserPlugin/background.js
View File

@ -1,44 +1,42 @@
chrome.contextMenus.create(
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) {
@ -71,3 +90,12 @@ function getVal (key) {
})
})
}
function clearVal (key) {
return new Promise((resolve, reject) => {
chrome.storage.local.remove(key, function () {
console.log("remove成功", key);
resolve();
})
})
}

11
浏览器插件/bookmarkBrowserPlugin/popup/index.html
View File

@ -7,8 +7,8 @@
<style>
html,
body {
width: 40em;
width: 80em;
padding: 0.2em;
width: 8em;
}
#content {
color: red;
@ -16,7 +16,12 @@
</style>
</head>
<body>
<a href="https://fleyx.com/userSpace/ssoAuth" target="_blank">点击登录</a>
<a id="login" href="https://fleyx.com/userSpace/ssoAuth" target="_blank">点击登录</a>
<div id="action" style="display: none">
<button id="logout">退出登陆</button>
<button title="同步云端书签到浏览器（覆盖本地）">同步云端书签</button>
<button title="同步浏览器书签到云端(覆盖云端)">同步浏览器</button>
</div>
<p id="content"></p>
<script type="text/javascript" src="/static/js/axios.min.js"></script>
<script type="text/javascript" src="/static/js/config.js"></script>

47
浏览器插件/bookmarkBrowserPlugin/popup/index.js
View File

@ -1,2 +1,49 @@
console.log("asdf");
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";
}
}
})

83
浏览器插件/bookmarkBrowserPlugin/static/js/content.js
View File

@ -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);
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, "*");
}