京淘项目搭建（三）

一、用户登录实现

1、用户数据存储

1.1）业务说明

根据登录需求，后台服务器返回SysResult对象，其中data表示 token的记录.
规则：服务器返回的响应的数据应该采用一种特殊的方式进行保存，否则用户的数据将会丢失。

{status: 200, msg: "服务器处理成功", data: "4edf7d1fbe2f4b14bc7227c85b4998b3"}

1.2）Session

Session：在计算机中，尤其是在网络应用中，称为“会话控制”。Session对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web页时，如果该用户还没有会话，则Web服务器将自动创建一个 Session对象。当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。例如，如果用户指明不喜欢查看图形，就可以将该信息存储在Session对象中。有关使用Session 对象的详细信息，请参阅“ASP应用程序”部分的“管理会话”。注意会话状态仅在支持cookie的浏览器中保留。

总结:

1. Session 是会话控制
2. Session可以用户存储数据
3. Session生命周期整个会话，在会话期间数据有效, 如果会话窗口关闭 则数据清除.
4. Session数据存储在浏览器的内存中(前端的)

1.3）Cookie(了解)

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息 [1] 。

总结:

1. Cookie 是一个文本文件
2. Cookie 存储的是用户信息 (加密数据 更加安全)
3. Cookie 保存到用户的计算机终端中， 可以临时/永久的存储信息

1.4）关于Session和Cookie的总结

1. 手机银行的用户登录信息?? session 安全性要求较高
2. 购物网站 要求用户七天免密登录?? 使用Cookie进行存储!！！
3. 公司的财务系统的登录信息? 建议使用Session
   电影: 没有绝对安全的系统

总结：如果对于数据安全性要求较高 则使用Session，如果存储一些大量查询的数据(不重要的)一般采用Cookie进行保存

1.5）项目中的使用

说明: 用户登录之后 将用户信息保存到Session中.
JS代码如下:

浏览器中的Session 控制：
当会话关闭时，Session数据将会被清空

二、系统首页跳转

1、系统首页跳转说明

1.1）JS实现页面跳转

1.2）编辑路由规则

1.3）效果展现

2、路由导航守卫

2.1)业务说明

需求: 如果用户没有登录，则不允许访问其他的页面，只允许访问login登录页面。
实现：

1. 前端实现：VUE中提供了路由导航守卫!!!
2. 单点登录策略，第四阶段进行讲解

2.2）路由导航守卫实现

//配置路由对象
const router = new VueRouter({
  routes
})

/* 配置路由导航守卫 控制权限
  1.to 要跳转的网址
  2.from 请求从哪里来
  3.next 回调函数  放行/跳转
 */
router.beforeEach((to,from,next) => {
  //1.如果用户访问 /login  请求应该放行 终止程序
  if(to.path === '/login') {
    return next()
  }

  //2.如果用户访问不是login 则需要校验是否登录 检查是否有token
  let token = window.sessionStorage.getItem('token')
  if(token !== null && token.length > 0){
    return next()
  }else {
    //没有token 应该跳转到登录页面 "/login"
    return next("/login")
  }
})

三、左侧菜单获取

1、项目介绍

1.1）表设计说明

说明: 如果查询所有的一级菜单 则parent_id = 0
如果查询二级菜单信息 则parent_id = 1级菜单的ID
如果查询三级菜单信息 则parent_id = 2级菜单的ID

1.2）编辑Rights的POJO

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

import java.util.List;

@TableName("rights") //标识对象与标的映射关系
@Data
@Accessors(chain = true)
public class Rights extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private Integer parentId;
    private String path;
    private Integer level;
    @TableField(exist = false)
    private List<Rights> children; //不是表格固有属性
}

1.3 构建层级代码结构

编辑Mapper----Service-----Controller 层级代码 方便后续业务调用
完成查询demo

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/rights")
public class RightsController {

    @Autowired
    private RightsService rightsService;

    //demo测试 获取全部列表信息
    @RequestMapping("/getAll")
    public List<Rights> getAll(){

        return rightsService.getAll();
    }

页面效果：http://localhost:8091/rights/getAll

1.4）关于端口号说明

8000端口：VUE UI vue客户端管理器所有占用的端口.
8080端口：jtadmin 脚手架项目启动时占用的端口号
8091端口：后台SpringBoot业务系统的端口号

2、实现左侧菜单

2.1）编辑页面JS

说明：当页面访问时，根据生命周期函数，调用getMenuList()方法，从后台的服务器获取菜单列表信息，JS如下：

async getMenuList() {
       const {data: result} =  await this.$http.get('/rights/getRightsList')
       if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
       this.menuList = result.data

      },

2.2）接口文档说明

说明：左侧菜单需要获取2级菜单信息，二级菜单封装到一级菜单的children属性中。
请求路径：/rightslgetRightsList
请求类型：GET
请求参数：无
响应数据：SysResult对象

参数名	参数说明	备注
status	状态信息	200表示服务器请求成功，201请求失败
msg	服务器返回的提示信息	可以为null
data	服务器返回的业务数据	返回权限List集合

2.3）编辑RightsController

package com.jt.controller;

import com.jt.pojo.Rights;
import com.jt.service.RightsService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/rights")
public class RightsController {

    @Autowired
    private RightsService rightsService;

    //demo测试 获取全部列表信息
    @RequestMapping("/getAll")
    public List<Rights> getAll(){

        return rightsService.getAll();
    }

    /**
     * 需求: 查询2级菜单结构,并且封装为List集合
     * URL: /rights/getRightsList
     * 参数: 暂时没有
     * 请求类型: get
     * 返回值: SysResult对象(list集合)
     */
    @GetMapping("/getRightsList")
    public SysResult getRightsList(){

        List<Rights> rightsList = rightsService.getRightsList();
        return SysResult.success(rightsList);
    }

}

2.4）编辑编辑RightsServiceImpl

package com.jt.controller;

import com.jt.pojo.Rights;
import com.jt.service.RightsService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("/rights")
public class RightsController {

    @Autowired
    private RightsService rightsService;

    //demo测试 获取全部列表信息
    @RequestMapping("/getAll")
    public List<Rights> getAll(){

        return rightsService.getAll();
    }

    /**
     * 需求: 查询2级菜单结构,并且封装为List集合
     * URL: /rights/getRightsList
     * 参数: 暂时没有
     * 请求类型: get
     * 返回值: SysResult对象(list集合)
     */
    @GetMapping("/getRightsList")
    public SysResult getRightsList(){

        List<Rights> rightsList = rightsService.getRightsList();
        return SysResult.success(rightsList);
    }
}