Vue 后台管理项目5-登录状态判断(token令牌)

登录状态判断(token令牌)

1.token令牌

Ⅰ.传统身份验证的方法:

标题	描述
问题:HTTP 是一种没有状态的协议	也就是它并不知道是谁在访问客户端，靠用户名还有密码通过了身份验证，下回这个客户端再发送请求时候，还得再验证
解决方法	1.当用户请求登录的时候，我们在服务端生成一条记录.
	2.记录里说明登录用户是谁，然后把记录的 ID 号发送给客户端，客户端把这个 ID 号存储在 Cookie 里，下次这个用户再向服务端发送请求的时候，可以带着这个 Cookie
	3.这样服务端会验证这个 Cookie 里的信息，如果可以在服务端里找到对应的记录，就通过身份验证，把用户请求的数据返回给客户端
	4.上面说的就是 Session，需要在服务端存储为登录的用户生成的 Session ，这些 Session 可能会存储在内存，磁盘，或者数据库里，需要在服务端定期的去清理过期的 Session

Ⅱ.基于 Token 的身份验证方法:

标题	描述
token令牌	基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录
解决方法	1.客户端使用帐号跟密码请求登录
	2.服务端收到请求，去验证帐号与密码
	3.验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
	4.客户端收到 Token 以后可以把它存储起来，一般存在sessionStroage里
	5.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
	6.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

image

Ⅲ.对于前端需要掌握到什么程度?

token是由后端生成，前端只需要知道如何使用(响应体中获取token，保存，再次请求的时候发送给服务器).

2.登录状态判断验证

方法Ⅰ.在每个组件渲染出来前 ，在生命周期函数beforeCreate进行判定(每次路由跳转都需要)

NO.	步骤描述
1	登录成功获取token保存在sessionStroage中window.sessionStorage.setItem('token',res.data.data.token)
2	跳转到主页this.$router.push("main")
3	访问主页时判断登录，beforeCreate生命周期函数 ，有token才直接给登录(为了避免别人直接输入首页ip地址也可以登录)
4	没有token打回登录页，this.$router.push("login")
扩展:生命周期beforeCreate	表示组件实例刚创建 ，属性如data等都未绑定
扩展:路由编程式导航	在 Vue 实例内部，你可以通过 router.push

注意：this.router.push("index")的区别
前者表示根目录拼接index如：http://localhost:8080/index
后者表示替换后缀路由，如当前路由http://localhost:8081/#/upDate/users
跳转到http://localhost:8081/#/upDate/index

image

方法Ⅱ.导航守卫:路由跳转的时候，执行一个回调函数(简化代码量)

传送门:
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

image

//示例代码，可复制
//注册导航守卫(回调函数)，beforeEach全局前置守卫
router.beforeEach((to,from,next)=>{
    console.log("执行啦");
    console.log(to);
    console.log(from);
    //next 方法不执行就不会跳转，类似于中间件的作用
    next();
    if(to.path === '/login') {
      //登录页不需要进行判断
      next();
    }else{
        let token = window.sessionStorage.getItem("token");
      //判断token是否存在，有没有登录
      if(token){
        //token存在，登录成功
        //继续访问
        next();
      }else{
        //没有token，没有登录
        //this.$message.error("请先登录");提示框不生效
        //本来其他组件Vue实例能访问$message是因为它存在Vue构造函数的原型里
        //在router.js里this不是Vue实例,访问不到$message，可以用构造函数点出来
        Vue.prototype.$message.error('请先登录');
        // 去登录页:使用next直接跳转路由
        next('/login');
      }
    }

})

本文同步发表在我的个人博客：https://www.lubaojun.com/