项目源码地址
系列文章地址：https://www.jianshu.com/c/5f7e35ae89be
后端源码：https://github.com/Rackar/node_blog
前端源码：https://github.com/Rackar/node_blog_vue
前端技术概况
vue.js + element-ui + axios + @toast-ui/vue-editor
前后端分离，后端发布RESTful API，前端带着jwt token交互
登录
登录时将token保存到$store.state,同时写入localStorage。
并从token中解析出payload中的userid和username供全局使用
store.js
mutations: {
login_saveToken(state, data) {
state.token = data; //data = "Bearer sdfsdfsdfwefas.sdfsdfsdf.sdfasdfsdfsdf"结构
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认证
给axios做全局配置，拦截请求增加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);
}
);
拦截影响检测token:
axios.interceptors.response.use(
function(response) {
// 用户信息是否超时，重定向到登录页面
// 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库，但是这个库有注入风险。换成了@toast-ui/vue-editor ，这个有另一个坑就是库太大了。为了解决过大的问题使用了下面的几个方法
路由和组件懒加载
路由通过下面的代码进行懒加载，同时注释不要拿掉，改成相应的名字，在webpack打包时会按注释名分割代码打包
{
name: "edit",
path: "/edit",
component: () =>
import(/* webpackChunkName: "editer" */ "./jianshu/editer2.vue")
},
取消预拉取
config.plugins.delete("prefetch"); //关闭预拉取插件
}
启用gzip压缩代
通过 npm i compression-webpack-plugin -D 设置代码压缩
