摘要:其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能。
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能。 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用
核心就是用localStorage存、取数据,这样当刷新浏览器,或者关闭在打开的时候能达到预期想要的效果
import Vue from "vue" import Router from "vue-router" Vue.use(Router) export default new Router({ routes: [ {path:"/", redirect:"/home"}, {path:"/login",name:"登录",component:resolve =>{require(["@/components/login"],resolve)}}, {path:"/home",name:"首页",component:resolve =>{require(["@/components/home"],resolve)}} ] })
其中redirect(默认跳转)可以直接写在home页面,刚进入页面直接跳转首页
然后我们在home.vue的 周期函数created里面做判断 Login的值状态(Login是在login.vue中localStorage存入的变量,现在我们先读取)
created() { console.log(localStorage.getItem("Login")); if(localStorage.getItem("Login")){ console.log("登录过了");//登录成功了,保留在登录页面 }else{ console.log("没有登录"); this.$router.push("/login");//没有登录过 返回登录页面 } },
然后我们在login.vue 当用户请求数据成功的时候把Login的状态写入
axios.post("后台接口",qs.stringify({ username:"用户名", password: "密码" }),{ headers: {//请求头 "Content-Type": "application/x-www-form-urlencoded", "Accept":"application/json" } }).then((response) => {//成功回调 if(response.data.status=="200"){//状态正常的时候 this.$router.push("/home"); //存储名字为Login值为true的变量,方便我们在home页面判断是否登录 localStorage.setItem("Login",true) } }, (error) => { console.log(error); });
如果首页有退出登录按钮,那退出的时候执行
out(){ localStorage.removeItem("Login");//删掉我们存的变量就可以了 this.$router.push("/login");//点击退成功按钮返回登录页面 }
这样就实现了Vue的登陆和注册,用户刷新浏览器,或者关闭在打开都保持登录状态
怎么样是不是很简单呢?
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52887.html
摘要:其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能。 其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能。 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存、取数据,这样当刷新浏览器,或者关闭在打开的时候能达到预期想要的效果 在router/index.js中 import Vue ...
摘要:用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。 Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首...
摘要:昨天研究了网站的注册流程,感兴趣的可以看下从前后端分别学习注册登录流程今天接着研究注册登录流程之登录。为解决这个问题,引入,它是由一组随机数组合的哈希表,当用户登录成功,本来发放给用户,现在变成发放给用户。 昨天研究了网站的注册流程,感兴趣的可以看下:从前后端分别学习——注册/登录流程1 今天接着研究注册/登录流程之登录。 登录 首先来看一下登陆过程:showImg(https://s...
阅读 3273·2021-11-23 09:51
阅读 2836·2021-10-28 09:33
阅读 829·2021-10-08 10:04
阅读 3611·2021-09-22 15:13
阅读 984·2019-08-30 15:55
阅读 2879·2019-08-30 15:44
阅读 522·2019-08-30 13:04
阅读 2913·2019-08-30 12:56