这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...

其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用
核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果

在router/index.js中

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的登陆和注册，用户刷新浏览器，或者关闭在打开都保持登录状态

怎么样是不是很简单呢？

这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...相关推荐

三分钟带你看懂HDMI接口的PCB设计
三分钟带你看懂HDMI接口的PCB设计本文主要讲解的是HDMI的设计,包括作用和运用的总结,希望大家看了以后能轻松的应对各种HDMI方案的PCB设计. 一.什么是HDMI? 高清晰度多媒体接口(英文 ...
眼镜计算机检查,一分钟教你看懂验光单
原标题:一分钟教你看懂验光单每次验光后,医生都会把检查结果附在病历本.R.L.VD.PD.S.C.A--让人眼花缭乱.这些看着像密码一样的字符和数字,很多人直呼看不懂.为了帮助大家更好地了解自己的眼 ...
一分钟带你看懂UML图
一分钟带你看懂UML图小小demo package Test;/*** @Description:* @ProjectNmae: demo1* @PackageName: Test* @ClassN ...
隐藏esp_仅需一分钟教你看懂汽车内的隐藏功能，哪些功能是你不知道的？
车内的按键多种多样,而且越高档的车,按键就越多.除了少数国产车,绝大部分车辆的按键标识都是用英文字母表示,从而导致不少车主只能通过查看说明书才知道是什么意思. 今天小编整理了车内各种按键标识,不是很清 ...
三分钟带你看懂prototype原型——ES6进阶
三分钟带你看懂prototype原型--ES6进阶 1. prototype 定义 2. new 构造函数 3. 存储 4. prototype 作用 1. prototype 定义在JS中的类的实 ...
(转载)最全各种浏览器网页星号点号密码查看最简方法（技术小白也能看懂使用）
https://blog.csdn.net/superit401/article/details/77892480 最全各种浏览器网页星号点号密码查看最简方法(技术小白也能看懂使用)加粗样式
rocketmq广播消息为什么不能重试_几分钟带你看懂“消息队列和RocketMQ”的入门总结
消息队列扫盲消息队列顾名思义就是存放消息的队列,队列我就不解释了,别告诉我你连队列都不知道似啥吧? 所以问题并不是消息队列是什么,而是消息队列为什么会出现?消息队列能用来干什么?用它来干这些事会带 ...
【全干货】5 分钟带你看懂 Docker ！
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者丨唐文广:腾讯工程师,负责无线研发部地图测试. 导语:Docker,近两年才流行起来的超轻量级虚拟机,它可以让你轻松完成持续集成.自动交付 ...
每天学习python 30分钟 -了解python - 看懂#!/usr/bin/python
文章目录看懂#!/usr/bin/python (2021/6/16) 当一件事情,只有迈出了第一步,才会有第二步,而踏出这第一步是非常重要的.今天起,将决定学习python,每天30分钟,一天高效 ...

这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...

在router/index.js中

这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...相关推荐

最新文章

热门文章