step03day12京淘项目用户登录信息保存及页面跳转

最新推荐文章于 2021-09-25 14:41:02 发布

lydon888

最新推荐文章于 2021-09-25 14:41:02 发布

阅读量136

点赞数

分类专栏：学习笔记文章标签： session cookie

原文链接：https://blog.csdn.net/qq_16804847/article/details/119408344?spm=1001.2014.3001.5501

版权

学习笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1.用户登录的实现

1.1.用户数据存储

1.1.1业务说明

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

1.1.2 Session

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

总结：

1.session 会话控制

2.Session可以存储用户信息

3.Session生命周期整个会话，如果会话窗口关闭，则数据清除

4. Session数据存储在浏览器的内存中(前端的)

1.1.3 Cookie(了解)

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

总结：

1.Cookie是一个文本文件

2.Cookie存储的是用户的登录信息（加密数据，更加安全）

3.Cookie保存到用户的计算机终端中,可以临时/永久保存

1.1.4关于Cookie和Session的总结

1.手机银行的用户登录信息？？ session安全性要求较高

2.购物网站，要求用户七天免密登陆？？使用cookie进行存储

3.公司财务系统的登陆信息？建议使用Session

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

1.1.5项目中的使用

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

if(result.status !== 200) return this.$message.error("用户登录失败")
        this.$message.success("用户登陆成功")

        //获取用户token信息
        let token = result.data
        window.sessionStorage.setItem("token",token)

        //用户登录成功之后,跳转到home页面
        this.$router.push("/home")

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

2 系统首页跳转

2.1 js实现用户跳转

1.js页面跳转

//用户登录成功之后,跳转到home页面
        this.$router.push("/home")

2.编辑路由规则

import Home from  "../components/Home.vue"

Vue.use(VueRouter)
const routes = [
{path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path:'/elementUI',component:ElementUI},
{path:'/home',component:Home}]

页面视图

2.2路由导航守卫

2.2.1 业务说明

需求: 如果用户没有登录,则不允许访问其他的页面,只允许访问login登录页面.
实现:
1. 前端实现: VUE中提供了路由导航守卫!!!
2. 单点登录策略第四阶段进行讲解

2.2.2 路由导航守卫实现

const router = new VueRouter({
  routes:routes
})
/*配置路由导航守卫 控制权限
    1.to  要跳转的网址
    2.from 请求从哪里来o
    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')
     }
    })

3. 左侧菜单获取

3.1项目介绍

3.1.1 表设计说明

说明: 如果查询所有的一级菜单则parent_id = 0

如果查询二级菜单信息则parent_id = 1级菜单的ID

如果查询三级菜单信息则parent_id= 2级菜单的ID

3.1.2pojo说明

@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; //不是表格固有属性
}

3.1.3构建层级代码

编辑Mapper----Service-----Controller 层级代码方便后续业务调用

完成查询demo

@RestController()
@CrossOrigin
public class RightController {
    @Autowired
    private RightService rightService;

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

3.1.4 关于端口号说明

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

3.2 实现左侧菜单

3.2.1 编辑页面JS

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

3.2.2 接口文档说明

说明: 左侧菜单需要获取2级菜单信息.
二级菜单封装到一级菜单的children属性中.

3.2.3 编辑RightsController

/**需求：/rights/getRightsList
     * 参数：暂时没有  请求类型：get
     * 返回值：SysResult对象(list集合)*/
    @GetMapping("/getRightsList")
    public SysResult getRightsList(){
        List<Rights> rightsList=rightService.getRightsList();
        return SysResult.success(rightsList);
    }

3.2.4 编辑RightsServiceImpl

@Service
public class ReightServiceImpl implements RightService{
    @Autowired
    private RightMapper rightMapper;

    /**需求：查询2级菜单信息
     * 步骤：1.查询一级菜单信息 parent_id=0
     *      2.查询二级菜单信息 parent_id=下一级菜单的信息
     *      3.将二级菜单封装到一级菜单中
     *查询方式:
     *      1.利用java循环实现2级封装.
     *      2.利用Mybatis的封装的方式实现查询 resultMap 自己练习
     * */
    @Override
    public List<Rights> getRightsList() {
        QueryWrapper queryWrapper=new QueryWrapper();
        queryWrapper.eq("parent_id", 0);
        List<Rights> oneList=rightMapper.selectList(queryWrapper);
        //分析：1级和2级有各自的对应的关系. 拿到当前的一级查询自己的二级菜单.
        for(Rights oneRights:oneList){
            //应该先清空原有条件
            queryWrapper.clear();
            //根据一级id查询二级信息.
            queryWrapper.eq("parent_id", oneRights.getId());
            List<Rights> twoList =rightMapper.selectList(queryWrapper);
            oneRights.setChildren(twoList);
        }
        return oneList;
    }
}