Vue登录退出功能
Vue登录/退出功能登录概述1.登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后,根据后台的响应状态跳转到项目主页2.登录业务的相关技术点http是无状态的通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态如果前端与服务器端之间不存在跨域,可以使用cookie或session如果前端与服务器端之间存在跨域,可以使用token登录 -
·
Vue登录/退出功能
登录概述
1.登录业务流程
-
在登录页面输入用户名和密码
-
调用后台接口进行验证
-
通过验证之后,根据后台的响应状态跳转到项目主页
2.登录业务的相关技术点
- http是无状态的
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态
如果前端与服务器端之间不存在跨域,可以使用cookie或session
如果前端与服务器端之间存在跨域,可以使用token
登录 - token原理分析
登录功能实现
1.登录页面的布局
通过Element-UI组件实现布局
- el-form
- el-form-item
- el-input
- el-button
- 字体图标
2. 路由导航守卫控制访问权限
如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。
// 挂载路由导航守卫 -- 相当于通过token值是否为空 设置了网页的访问权限
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数,表示放行,可以执行
// 1. next()放行
// 2. next('/login) 【强制跳转】到login页面
/* 如果请求登录页面,就放行 */
if (to.path === '/login') return next()
/* 请求登录之后才可以访问的页面 */
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
// 如果token的值为空,表示没有登陆,就强制跳转到登录页面
if (!tokenStr) return next('/login')
// 如果token的值不为空,表示已经登陆了,就允许访问页面
next()
})
退出
基于token 的方式实现退出比较简单,只需要销毁本地的token即可。这样,后续的请求就不会携带token,必须重新登录生成一个新的 token之后才可以访问页面。
即: 退出 – 销毁本地的token
// 清空token
window.sessionStorage.clear();
// 跳转到登录页
this.$router.push("/login");
更多推荐
已为社区贡献9条内容
所有评论(0)