前端用户登录操作

用户登录操作"/>

前端用户登录操作

目录

一、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.datawindow.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不为nullif(token){return next()}next("/login")
})