flask vuejs 全栈开发-min.png

用户认证修改为 JWT(JSON Web Token),后端使用 pyjwt 库生成 JWT 并验证合法性;前端使用 JSON.parse 解析 JWT 中的 payload 数据。提示消息改用 vue-toasted 插件,方便好用。前端每次访问 API 都需要附带 Token 到 Authorization 请求头中,使用请求拦截器自动添加进去,另外设置了响应拦截器,自动处理 401 和 404 错误。用户头像使用在线的 Gravatar 服务,前端使用 moment.js 格式化时间。个人主页的路由参数变化后默认是重用组件并不会重新加载数据,要使用 vue-router 的 beforeRouteUpdate() 导航守卫

flask vuejs 全栈开发-min.png

前端 Vue.js 如何划分组件,要动态显示 Alert 消息,父组件通过 props 给子组件传值即可。用户登录前后,导航栏上分别显示 Login 和 Logout 按钮,需要使用 store 模式维护一个共同的状态。另外,vue-router 的 beforeEach 可以指定哪些路由需要用户认证