項(xiàng)目源碼地址
系列文章地址：http://www.reibang.com/c/5f7e35ae89be
后端源碼：https://github.com/Rackar/node_blog
前端源碼：https://github.com/Rackar/node_blog_vue
前端技術(shù)概況
vue.js + element-ui + axios + @toast-ui/vue-editor
前后端分離，后端發(fā)布RESTful API狡恬，前端帶著jwt token交互
登錄
登錄時(shí)將token保存到$store.state,同時(shí)寫入localStorage。
并從token中解析出payload中的userid和username供全局使用
store.js
mutations: {
login_saveToken(state, data) {
state.token = data; //data = "Bearer sdfsdfsdfwefas.sdfsdfsdf.sdfasdfsdfsdf"結(jié)構(gòu)
window.localStorage.setItem("token", data);
function parseJwt(token) {
var base64Url = token.split(".")[1];
var base64 = decodeURIComponent(
atob(base64Url)
.split("")
.map(function(c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(base64);
}
var dd = parseJwt(data.split(" ")[1]);
// console.log(dd);
state.userid = dd.userid;
state.username = dd.username;
}
}
jwt認(rèn)證
給axios做全局配置，攔截請(qǐng)求增加token:
main.js
axios.interceptors.request.use(
config => {
config.headers = {
"Content-Type": " application/json"
};
if (store.state.token) {
config.headers.Authorization = `${store.state.token}`;
}
// config.headers[] = localStorage.token;
return config;
},
err => {
return Promise.reject(err);
}
);
攔截影響檢測(cè)token:
axios.interceptors.response.use(
function(response) {
// 用戶信息是否超時(shí)伊履，重定向到登錄頁面
// debugger;
if (response.data.status === 0) {
localStorage.clear();
router.replace({
path: "/login",
query: { redirect: router.currentRoute.fullPath }
});
}
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
markdown編輯器
編輯器之前選擇的是simplemde庫(kù)侈净，但是這個(gè)庫(kù)有注入風(fēng)險(xiǎn)浮梢。換成了@toast-ui/vue-editor ，這個(gè)有另一個(gè)坑就是庫(kù)太大了晕鹊。為了解決過大的問題使用了下面的幾個(gè)方法
路由和組件懶加載
路由通過下面的代碼進(jìn)行懶加載，同時(shí)注釋不要拿掉，改成相應(yīng)的名字溅话，在webpack打包時(shí)會(huì)按注釋名分割代碼打包
{
name: "edit",
path: "/edit",
component: () =>
import(/* webpackChunkName: "editer" */ "./jianshu/editer2.vue")
},
取消預(yù)拉取
config.plugins.delete("prefetch"); //關(guān)閉預(yù)拉取插件
}
啟用gzip壓縮代
通過 npm i compression-webpack-plugin -D 設(shè)置代碼壓縮
