vue路由跳转时判断用户是否登录功能的实现


Posted in Javascript onOctober 26, 2017

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转。

一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex);

简单用vuex表示一下,不会可以自己去官网多看看;

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

var state = {
  isLogin:0,     //初始时候给一个 isLogin=0 表示用户未登录
};

const mutations = {
  changeLogin(state,data){
    state.isLogin = data;
  }

};

二丶在用户登录时改变登录状态;

this.$store.commit(‘changeLogin‘,‘100‘)   
 //登录后改变登录状态 isLogin = 100 ;

三丶重点来了;

在你的路由入口加上导航钩子,具体什么意思看代码;

一丶设置需要校验的路由

{ path: ‘/admin‘, 
  component: Admin,
  meta:{auth:true} // 设置当前路由需要校验  不需要校验的路由就不用写了;不要问为什么,自己去看官网

  }

二丶路由跳转并校验

router.beforeEach((to,from,next) => {   

if(to.matched.some( m => m.meta.auth)){     

// 对路由进行验证     
if(store.state.isLogin==‘100‘) { // 已经登陆       
next()   // 正常跳转到你设置好的页面     
}
else{       

// 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;

 

next({path:‘/login‘,query:{ Rurl: to.fullPath} })
 

 } 


}else{ 



next() 

} 
})

以上这篇vue路由跳转时判断用户是否登录功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
微信小程序开发探究
Dec 27 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 #Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 #Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
Python操作csv文件实例详解
2017/07/31 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python正则表达式指南 推荐
2018/10/09 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
会计专业自荐信范文
2013/12/02 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
妇产医师自荐信
2014/01/29 职场文书
精彩广告词大全
2014/03/19 职场文书
企业节能减排实施方案
2014/03/19 职场文书
献爱心活动总结
2014/05/07 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2014年学校团委工作总结
2014/12/20 职场文书