电商后台管理系统项目总结

一、项目概述

1.项目简介

电商后台管理系统，采用前后端分离的开发模式，(主流，开发效率高，容易维护)。

前端是基于vue技术栈的SPA项目，主要负责页面绘制和发送网络请求调用后端接口；后端负责操作数据库，并且提供一些接口给前端。

2.技术栈

Vue、Vue-Router、Element-UI、Axios、Echarts

二、登录与退出功能

1.登录业务流程

在登录页面输入用户名和密码，调用后台接口验证，根据后台响应状态跳转。参数是用户名与密码，只有数据库存在的用户名与密码才可以登录

2.登录业务技术难点

本项目通过token方式记录维持状态(本项目前端与后端服务器存在跨域需要使用token)

客户端登录页面输入用户名与密码，服务器端验证通过后生成该用户的token并返回给客户端，这样子可以实现只有登录之后才能访问内部相关页面。

3.登录--token(令牌)原理分析

window.sessionStorage.setItem("token", res.data.token); // 将登录成功后服务器返回的token保存到客户端的sessionStorage中;

客户端存储token值(保存在客户端的sessionStorage中而不是本地，当前窗口打开期间生效)，后续所有的请求都携带该token，

服务端验证token通过，通过编式导航跳转。this.$router.push("/home");

4.路由导航守卫控制访问权限

//挂载路由导航守卫 to:将要访问的路径 from：从哪一个路径来的 next：放行
router.beforeEach((to, from, next) => {
  // 如果url是登录界面地址
  if (to.path == '/login')
    return next()
  // url是登录后面地址 未经过登录
  const tokenstr = window.sessionStorage.getItem('token')
  if (!tokenstr)
    return next('/login')
  return next()
})