页面登录知识

        每次在前端登录，调用前端的服务都会像后端发送一次请求，这就需要我们频繁的登录验证个人信息，这样明显是不切实际的，这时我们就需要一种标记使服务器认得我们。这里我们会使用Session与Cookie的技术了

1.Session

Session：在计算机中，尤其是在网络应用中，称为“会话控制”。Session对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web页时，如果该用户还没有会话，则Web服务器将自动创建一个 Session对象。当会话过期或被放弃后，服务器将终止该会话。

例：在网页端登录一些网站，登陆一次只要页面不关闭就可以在页面里进行各种操作请求等

 

一般登陆成功后后端会返回一个凭证缓存在Session中，显然这个凭证是不可以重复的，这里我们一般后端会返回一个UUID：UUID动态生成TOKEN,根据当前时间毫秒数+随机数利用hash算法生成几乎可以保证不重复（有2^128分之一产生哈希碰撞）

String token = UUID.randomUUID().toString().replace("-", "");
        return token;

总结：

1. Session称之为 “会话机制”
2. 在浏览器中打开网页 就是一个会话.
3. 用户的数据可以保存到会话中,但是有生命周期. 当会话关闭,则数据消失.

2.Cookie

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

例：冲了一些视频会员，每次打开软件不需要重新登录一次，直接系统登陆

总结：

1. cookie是一个小型的文本文件
2. cookie中存储的数据一般都是密文.
3. cookie中的数据的生命周期可控. 几天.几年!!!

3.session和cookie区别

1. session的数据是临时存储.cookie的数据可以永久保存. (生命周期不同)
2. sesion是浏览器中的一个内存对象!而cookie是一个实际的本地文件. (形式不同).
3. session一般存储是一些涉密数据.cookie一般存储相对公开的数据(免密登录). (安全性)

以上解决了登录需要频繁校验的问题，我们登录上去一个网页点击里面的一些跳转链接的时候会跳到另外一个网页，这时我们的登录就显得苍白无力了，外界可以直接访问这个IP而跳过登录界面进入，这时我们就需要权限校验-路由导航守卫

4.权限校验-路由导航守卫

1.作用

        前端页面跳转是通过路由进行控制. 规定: 如果用户没有登录,则只允许访问登录页面.只有登录之后才能访问其它页面，拦截用户的请求.

2.逻辑

        在登录时会返回一个UUID值存储在Session中，检查是否存在，有表示已经登录，放行，否则重定向到登录页面

3.代码

router.beforeEach((to,from,next) =>{
  if(to.path === "/login") return next()
  let token = window.sessionStorage.getItem("token")
  //字符串类型的判断
  if(token) return next()
  next("/login")
})

参数一：to     路由跳转的网址
参数二：from   路由从哪里来
参数三：next   是一个函数，表示放行或者重定向
              next（）放行
              next（"/login"）重定向到登录页面