摘要：用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。
Vue项目中实现用户登录及token验证
先说一下我的实现步骤：
使用easy-mock新建登录接口，模拟用户数据
使用axios请求登录接口，匹配账号和密码
账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页
前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。
注销后，就清除sessionStorage里的token信息并跳转到登录页面
使用easy-mock模拟用户数据我用的是easy-mock,新建了一个接口，用于模拟用户数据:
{
"error_code": 0,
"data": [{
"id": "1",
"usertitle": "管理员",
"username": "admin",
"password": "123456",
"token": "@date(T)",
},
{
"id": "2",
"usertitle": "超级管理员",
"username": "root",
"password": "root",
"token": "@date(T)",
}
]
}
login.vue中写好登陆框：
用户名：
密码：
然后下载axios：npm install axios --save,用来请求刚刚定义好的easy-mock接口：
login(){
const self = this;
axios.get("https://easy-mock.com/mock/5c7cd0f89d0184e94358d/museum/login").then(response=>{
var res =response.data.data,
len = res.length,
userNameArr= [],
passWordArr= [],
ses= window.sessionStorage;
// 拿到所有的username
for(var i=0; i{
console.log("连接数据库失败！")
})
}
这一步最重要的是当账号密码正确时，把请求回来的token放在sessionStorage中，
配置路由然后配置路由新加一个meta属性：
{
path: "/",
name: "login",
component: login,
meta:{
needLogin: false
}
},
{
path: "/index",
name: "index",
component: index,
meta:{
needLogin: true
}
}
判断每次路由跳转的链接是否需要登录，
导航卫士在main.js中配置一个全局前置钩子函数：router.beforeEach（），他的作用就是在每次路由切换的时候调用
这个钩子方法会接收三个参数：to、from、next。
to：Route：即将要进入的目标的路由对象，
from：Route：当前导航正要离开的路由，
next：Function：个人理解这个方法就是函数结束后执行什么，先看官方解释
1.next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed（确认的），
2.next(false)：中断当前的导航。如果浏览器的url改变了（可能是用户手动或浏览器后退按钮），那么url地址会重置到from路由对应的地址。
3.next("/")或next({path:"/"})：跳转到一个不同的地址。当前导航被中断，进入一个新的导航。
//路由守卫
router.beforeEach((to, from, next)=>{
//路由中设置的needLogin字段就在to当中
if(window.sessionStorage.data){
console.log(window.sessionStorage);
// console.log(to.path) //每次跳转的路径
if(to.path === "/"){
//登录状态下 访问login.vue页面 会跳到index.vue
next({path: "/index"});
}else{
next();
}
}else{
// 如果没有session ,访问任何页面。都会进入到 登录页
if (to.path === "/") { // 如果是登录页面的话，直接next() -->解决注销后的循环执行bug
next();
} else { // 否则 跳转到登录页面
next({ path: "/" });
}
}
})
这里用了router.beforeEach vue-router导航守卫
每次跳转时都会判断sessionStorage中是否有token值，如果有则能正常跳转，如果没有那么就返回登录页面。
至此就完成了一个简单的登录状态了，浏览器关闭后sessionStorage会清空的，所以当用户关闭浏览器再打开是需要重新登录的
当然也可以手动清除sessionStorage，清除动作可以做成注销登录，这个就简单了。
loginOut(){
// 注销后 清除session信息 ，并返回登录页
window.sessionStorage.removeItem("data");
this.common.startHacking(this, "success", "注销成功！");
this.$router.push("/index");
}
写一个清除sessionStorag的方法。
一个简单的保存登录状态的小Demo。
参考：
腾讯云社区-Vue+SessionStorage实现简单的登录
SF-从前后端分别学习——注册/登录流程2
Vue-router实现单页面应用在没有登录情况下，自动跳转到登录页面
vue+axios新手实践实现登陆
Vue实战(四)登录/注册页的实现
vue页面控制权限,vuex刷新保存状态、登录状态保存
vue页面控制权限,vuex刷新保存状态、登录状态保存
(vue.js)前后端分离的单页应用如何来判断当前用户的登录状态？
Vue登录注册，并保持登录状态
vue登录注册及token验证
Vue项目中实现用户登录及token验证
vue-router守卫导航官方文档：vue-router导航守卫
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109019.html
摘要：此文章用于记录本人学习历程，有共同爱好者可加好友一起分享。从上周天，由于本周有公司篮球比赛，所以耽误两天晚上，耗时三个晚上勉强做了一个登录功能。这里的用户信息和登录状态都是直接取的中的用户信息进行属性值初始化。 此文章用于记录本人VUE学习历程，有共同爱好者可加好友一起分享。从上周天，由于本周有公司篮球比赛，所以耽误两天晚上，耗时三个晚上勉强做了一个登录功能。中间的曲折只有自己知道，有...
摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前 完整项目地址：vue-element-admin 系列文章： 手摸手，带你用vue撸后台 系列一（基础篇） 手摸手，带你用vue撸后台 系列二(登录权限篇) 手摸手，带你用vue撸后台 系列三 (实战篇) 手摸手，带你用vu...
摘要：输入框内容过滤产品有一个需求是，在搜索用户信息时，只能通过邮箱搜索，并且只能输入字母数字以及。我选择了输入框的值这里的坑就是需要在中更新值，因为元素这时才刷新。是否有一定要用的必要类似的管理系统涉及到不同页面之间的交互都很少。 初始化项目 使用 Vue-cli3 初始化项目1 安装 Element UI安装 Vue-i18n，做相关配置2,3 原则上需要对 Element 也做 I18...
摘要：在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。另一方面，当与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。可以进行确认收货后删除订单。 前言 每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做...
阅读 811·2023-04-25 20:18
阅读 2091·2021-11-22 13:54
阅读 2527·2021-09-26 09:55
阅读 3857·2021-09-22 15:28
阅读 2968·2021-09-03 10:34
阅读 1709·2021-07-28 00:15
阅读 1628·2019-08-30 14:25
阅读 1280·2019-08-29 17:16
