前端用户登录操作

目录

一、Session和Cookie

1.Session说明

2.Cookie说明

3.session和cookie区别

二、保存用户登录信息

三、设置路由导航守卫

---

一、Session和Cookie

1.Session说明

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

2.Cookie说明

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

3.session和cookie区别

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

二、保存用户登录信息

        用户登录成功后，将携带的token信息封装到sessionStorage里，路由导航守卫将基于此token信息来判断用户是否登录。如果没有token信息，则表示用户没有登录，重定向到用户登录页面。

login(){
      //获取表单对象之后进行数据校验
      //valid 表示校验的结果 true表示通过  false表示失败
      this.$refs.loginFormRef.validate(async valid => {
         //如果没有完成校验则直接返回
         if(!valid) return

        //如果校验成功,则发起ajax请求
        const {data: result} = await this.$http.post('/user/login',this.loginForm)
        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")
      })
    }

三、设置路由导航守卫

        前端页面跳转是通过路由进行控制。

        规定： 如果用户没有登录,则只允许访问登录页面.只有登录之后才能访问其它页面.

const router = new VueRouter({
  routes
})

/**
 * 定义路由导航守卫
 * 参数1. to    路由跳转的网址
 * 参数2. from  路由从哪里来
 * 参数3. next  是一个函数,表示放行或重定向
 *              next() 放行
 *              next("/login") 重定向
 * 业务实现:
 *    核心逻辑: 检查是否有token.
 *        如果访问login页面 直接放行.
 *        有token 表示已经登录,放行请求
 *        没有token 表示用户没有登录,重定向到登录页面
 */
router.beforeEach((to,from,next) => {
   if(to.path === "/login"){
     return next()
   }
    //说明用户访问的页面不是login 请求需要校验
    //获取token数据.
    let token = window.sessionStorage.getItem("token")
    //if(token !==null && token.length>0)
    //下列if 解释为: 如果token不为null
    if(token){
      return next()
    }

    next("/login")
})