Vue+SessionStorage实现简单的登录

我是基于vue脚手架cli做的,没用过cli的可以看下我之前写的cli脚手架搭建

(再补充一点,安装脚手架的时候尽量选择安装路由。剩下的代码规范那些可以选否)

后台数据是用mock-data模拟的 下面会有具体步骤

开始啦:

1.初始化一个vue项目之后先来在目录中创建mock-data.json文件,用于模拟数据

mock-data.json暂时写了三条数据,用于随后登陆用

2.vue-cli默认的打开页面是hello.vue,此时我们在components中新建两个文件

login.vue和list.vue分别用来登陆和另一个展示页面

3.完善登陆页面

list页面随便写点东西就行了

login页面template中先随便写下,样式先不写主要实现功能

然后在data中绑定model数据

我是把hello中的东西都删了 写了个登陆后显示页面 大家随意 这块无所谓(是不是写的有点太细太基础了。。下面加快节奏)

4.配置路由:文件建好了。接下来吧路由配置下,下面这个是正常配置的路由↓↓↓↓↓

注释部分暂时忽略,权当没看见

那么我们需要在这个基础上添加个属性,就是把注释释放开的效果(手动滑稽)

同样在list里面也加上这个属性 加这个属性干啥呢?继续看 下一步就知道了

5.此时路由弄好了,来到main.js中

在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:'/'}):跳转到一个不同的地址。当前导航被中断,进入一个新的导航。

这里可以把三个参数打出来看一下,在上面设置的needLogin字段就在to里面,接下来就会用到

6.判断是否需要登录

这里就用到了needLogin字段

对这个字段进行判断,如果没有这个字段说明不需要登录就能查看的页面 就让他next()就行了

这里有个坑,next()必须写上,next()必须写上,next()必须写上,不然会报错↓↓↓↓↓

7.现在能知道哪个页面需要登录了 接下来来到login页面

login.vue里面的button有一个login方法,在login中我们用axios验证账号密码

安装axios:cnpm install axios --save

在login中引入axios

接下来就可以在登录页面用axios了,具体步骤写在注释里了,更方便大家理解

8.我们把session存好后就可以在main.js中用了

好了,至此就完成了一个简单的登录了,浏览器关闭后sessionStorage会清空的,所以当用户关闭浏览器再打开是需要重新登录的

当然也可以手动清除sessionStorage,清除动作可以做成注销登录,这个就简单了↓↓↓↓↓

写一个清除session的方法

代码不多 相信大家跟着来一遍就会了 ,有什么不足的希望大家能指正,共同学习!哪里不明白可以在下面评论,看到了我会解释的

源码地址:https://gitee.com/RtyXmd/vueDengLu.git


补充一点:有的朋友如果是直接clone下来的 安装完依赖之后需要全局安装json-server:cnmp install json-server -g

然后输入json-server .\mock-data.json启动之后就可以验证数据了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java相关

非常全面的vim配置文件

1813
来自专栏程序员宝库

IntelliJ IDEA 教程设置讲解

IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新...

1174
来自专栏流媒体

gcc用法以及静态/动态链接

-E:只进行预处理,不编译 -S:只编译,不汇编 -c:只编译、汇编,不链接 -g:编译器在编译的时候产生调试信息。 -I:指定include包含文件的...

852
来自专栏北京马哥教育

成为 Linux 终端高手的七种武器

Linux 终端不仅是一个键入命令的地方。如若你能熟谙这些基础技巧,那么你会在绝大多数 Linux 发行版的默认使用的 Bash shell中游刃有余。 这是...

2868
来自专栏lgp20151222

tar包和jar包和war包的区别?

tar:tar是*nix下的打包工具,生成的包通常也用tar作为扩展名,其实tar只是负责打包,不一定有压缩,事实上可以压缩,也可以不压缩,通常你看到xxxx....

982
来自专栏西安-晁州

nodejs初印象

初学Nodejs,特意在此记录学习过程,算是对这段时间的一个summary吧,相互勉励,共同进步嘛,Now Begin: 1、什么是nodejs nodejs ...

2120
来自专栏超然的博客

URL中的#

作者:阮一峰   http://www.ruanyifeng.com/blog/2011/03/url_hash.html

1011
来自专栏c#开发者

Vs.net 2008 sp1新特性之Dynamic Data Web Site

Vs.net 2008 sp1新特性之Dynamic Data Web Site 介绍 asp.net的动态数据,是一个web site开发框架,可让您很容...

3415
来自专栏有趣的django

Django搭建blog网站(一)

一、前言 1.1.环境 python版本:3.6 Django版本:1.11.6 1.2.预览效果 最终搭建的blog的样子,基本上满足需求了。框架搭好了,至于...

8268
来自专栏非著名程序员

Android的编译打包流程详解

阅读本文可以让获得如下知识:(1)Android编译打包流程。(2) Android是如何通过R文件引用到真正的资源文件?(3)打包流程中的的对齐是什么,为什么...

20410

扫码关注云+社区

领取腾讯云代金券