Vue登录注册,并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法。
项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等
有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等
那如何判断路由是否需要登录呢?就要在路由JS里面做文章
在router.js中添加meta区分
比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置为false
{
//登录
path: '/login',
component: login,
meta: {
isLogin: false
}
},
{
//注册
path: '/register',
component: register,
meta: {
isLogin: false
}
},
而在首页我们需要登录才能进入,那么我们把meta中的isLogin标志设置为true
{
//首页
path: '/home',
component: home,
meta: {
isLogin: true
},
}
这样我们就为进入各个路由是否需要登录做了区分。
接下来我们在login.vue中修改登录后状态
我们使用axios向后台发起登录请求
this.$axios.post("/xxx/login", {user:name,password:pwd})
.then(data => {
//登录失败,先不讨论
if (data.data.status != 200) {
//iViewUi的友好提示
this.$Message.error(data.data.message);
//登录成功
} else {
//设置Vuex登录标志为true,默认userLogin为false
this.$store.dispatch("userLogin", true);
//Vuex在用户刷新的时候userLogin会回到默认值false,所以我们需要用到HTML5储存
//我们设置一个名为Flag,值为isLogin的字段,作用是如果Flag有值且为isLogin的时候,证明用户已经登录了。
localStorage.setItem("Flag", "isLogin");
//iViewUi的友好提示
this.$Message.success(data.data.message);
//登录成功后跳转到指定页面
this.$router.push("/home");
}
});
Vuex里面我是这样写的(如果项目不需要Vuex,那么直接使用HTML5储存就可以了):
export const store = new Vuex.Store({
// 设置属性
state: {
isLogin: false,
},
// 获取属性的状态
getters: {
//获取登录状态
isLogin: state => state.isLogin,
},
// 设置属性状态
mutations: {
//保存登录状态
userStatus(state, flag) {
state.isLogin = flag
},
},
// 应用mutations
actions: {
//获取登录状态
setUser({commit}, flag) {
commit("userStatus", flag)
},
}
})
重点来了~,在mian.js里
router.beforeEach((to, from, next) => {
//获取用户登录成功后储存的登录标志
let getFlag = localStorage.getItem("Flag");
//如果登录标志存在且为isLogin,即用户已登录
if(getFlag === "isLogin"){
//设置vuex登录状态为已登录
store.state.isLogin = true
next()
//如果已登录,还想想进入登录注册界面,则定向回首页
if (!to.meta.isLogin) {
//iViewUi友好提示
iView.Message.error('请先退出登录')
next({
path: '/home'
})
}
//如果登录标志不存在,即未登录
}else{
//用户想进入需要登录的页面,则定向回登录界面
if(to.meta.isLogin){
next({
path: '/login',
})
//iViewUi友好提示
iView.Message.info('请先登录')
//用户进入无需登录的界面,则跳转继续
}else{
next()
}
}
});
router.afterEach(route => {
window.scroll(0, 0);
});
这样就已经完成了Vue的登录注册,当用户关闭浏览器或者第二天再次进入网站,用户依旧可以保持着登录的状态直到用户手动退出登录。
Tips:用户退出只需要localStorage.removeItem("Flag")即可
如果有什么疑问欢迎留言,有错误或者有更简单的方法欢迎大力指出~~
来源:https://segmentfault.com/a/1190000016040068
Vue登录注册,并保持登录状态的更多相关文章
- 结合数据库登录注册模块,登录成功之后跳到WebView
最近刚刚做了一个模块,在本地建立一个数据库,存储注册的账号,登录的时候取出,正确则登录,登录之后跳到一个webView网页. 直接上代码吧. LoginActivity.java package co ...
- nodejs+express+mongodb实现登录注册
nodejs+express+mongodb实现登录注册 1 简介 登录注册功能使用nodejs+express+mongodb完成,其中对mongodb的操作使用mongoose完成,对mongod ...
- Vue+localstrong登录注册,并保持登录状态
在router.js中添加meta区分 比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置为false { //登录 path: '/login', component ...
- 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...
- vue+Mint-ui实现登录注册
创建一个组件:注册组件 (register/index.vue.script.js.style.scss,register/header) 注册路由 router/index.js { path: ' ...
- 用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)
我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H ...
- vue.js+koa2项目实战(三)登录注册模态框
登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分
0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.后端搭建 1.1项目结构 首先看一下后端的server目录 挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,mod ...
随机推荐
- Kafka工作流程
Kafka生产过程分析 1 写入方式 producer采用推(push)模式将消息发布到broker,每条消息都被追加(append)到分区(patition)中,属于顺序写磁盘(顺序写磁盘效率比随机 ...
- Json解析方式汇总 excel vba
一. 这种方式比较复杂,因为office版本的原因,所以要加其它函数 Private Function parseScript(strJson As String) Dim objJson As Ob ...
- xmind8 破解激活教程
这里以windows为例来演示,其它操作系统需根据情况修改相应步骤. 一.下载安装包 首先去xmind国外官网下载对应操作系统的安装包,国内官网的那个是有残缺的,不支持破解. 官网下载链接 二.下载破 ...
- 搜索会抓取网站域名的whoise信息吗
http://www.wocaoseo.com/thread-309-1-1.html 网站是否在信产部备案,这是不是会成为影响网站收录和排名的一个因素?百度是否会抓取域名注册人的相关whois信息吗 ...
- 《MySQL数据库》MySQL备份恢复
前言 MySQL数据库最重要的部分就是数据,所以保证数据不被损坏尤为重要,大家都知道911事件,当时非常多的数据丢失,导致经济混乱.接下来我们就来讲讲MySQL是如何保障数据完整,应对特殊情况,如何恢 ...
- 【免费】windows下如何生成tar.gz,一键生成tar.gz
废话 一.实验背景 tar.gz 是Linux和Unix下面比较常用的格式,一条命令就可以把文件压缩打包成tar.gz格式,然而这种格式在windows并不多见. Linxu服务器上,tar.gz 包 ...
- Spark保存的时候怎么去掉多余的引号转义
今天用SparkSQL保存一份json数据的时候,引号被转义了,并用括号包起来了,导致下游新来的小伙伴无法处理这份数据. 保存后的数据长这样(用\t分割): data "{\"ke ...
- vue mixin混入
基本结构 export default { data() { return {} }, computed: { }, methods: { }, filters: { }, created() { } ...
- Java8 Strean api
Stream 遍历数据集的高级迭代器.使用StreamApi让代码: 声明式:更简洁,更易读: 可复合:更灵活: 可并行:性能更好: 使用流 流的使用一般包括三件事: 一个数据源(如集合)来执行一个查 ...
- JS中有趣的内置对象-JSON
前言 在以前的web开发中,我们多数选择纯文本或XML作为我们的提交的数据格式,大多数是XML,少数纯文本.其实从AJAX(Asynchronous JavaScript and XML)的命名我们也 ...