router.beforeEach(function(to,from,next){
console.log('路由拦截')
console.log(to.name)
console.log(from.name)
if(to.name=='login'){
next();
}else{
if($.cookie('userIsLogin')=='true'){
next();
}else{
next({path:'/login'});
}
}
})

 我的登录地址是login,如果userIsLogin并没有写true的话,将在点击每一个连接的时候直接跳转到登录界面,

但是如果用户直接通过连接进入,那将直接可以查看此链接的内容,并不会进行拦截。

这个时候需要在最大的组件中添加如下代码

var app = new Vue({
el: '#app',
router,
components: {Container},
mounted: function(){
if(!($.cookie('userIsLogin')=='true')){
//如果用户并未登录 直接跳转到登录界面
this.$router.push('/login')
}
}
})

或者

将路由校验放置于Vue实例之前 也是可以的

Vue router拦截 如果用户并未登录直接跳转到登录界面(最简单的cookie演示)的更多相关文章

  1. vue router拦截器的简单使用

    之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...

  2. javaweb-实现不同用户登录后跳转到不同界面

    今天下午,实现了公文流转系统的一小部分——登录界面验证不同用户跳转到不同界面 Dao package com.office.Dao; import java.sql.Connection; impor ...

  3. Laravel 登录后跳转回登录前浏览的页面

    一.经过 Auth 中间件检查后跳转至登录页面 也就是没有通过 auth 中间件的认证检查,被 auth 中间件拦截后跳转至登录页面.这种情况下,Laravel 默认会在用户登录成功后自动跳转回登录前 ...

  4. yii中登录后跳转回登录前请求的页面

    当我们请求一个经过权限控制的请求不通过时,会跳转到一个地方请求权限,请求结束后需要跳转回之前的页面.比如我们请求一个需要登录的action,会被跳转到login页面,我们希望登录成功后跳转到我们之前希 ...

  5. 怎么实现登录之后跳转到登录之前的页面?SpringMVC+Freemarker

    项目中,想实现一个功能. 直接访问某个需要登录的url,比如/addArticle,可能会跳转到登录页面login.html. 登录成功之后,自动跳转到/addArticle这个登录前的页面,继续登录 ...

  6. 登录之后跳转到登录之前的页面 之 Referer 的坑

    简而言之:通过鼠标在页面上点击链接发送请求,请求header中会包含referer信息, 通过在浏览器地址栏书写并发送请求的,header中不会有referer信息. 为了完成登录动作成功后返回原页面 ...

  7. rails登录后跳转到登录前的路径

    # 重定向到存储的地址或默认地址 def redirect_back_or(default) redirect_to(session[:forwarding_url] || default) sess ...

  8. SpringBoot 拦截器--只允许进入登录注册页面,没登录不允许查看其它页面

    SpringBoot注册登录(一):User表的设计点击打开链接 SpringBoot注册登录(二):注册---验证码kaptcha的实现点击打开链接 SpringBoot注册登录(三):注册--验证 ...

  9. VUE实现登录然后跳转到原来的页面

    可以在路由里面设置需要登录的界面,判断下没有登录就跳转到登录界面,登录了就不用登录,这里用的是一个存储的 router.beforeEach((to, from, next) => { if(t ...

随机推荐

  1. 如何预览Github上的页面

    参考链接:https://www.jianshu.com/p/46ddd926f005

  2. MySql cmd下的学习笔记 —— 有关多表查询的操作(多表查询练习题及union操作)

    先建立一张 m 表 mysql> create table m ( -> mid int, -> hid int, -> gid int, ), -> matime da ...

  3. 使用Numpy将数据集中的data和target同时shuffle

    假设现在有图像数据imgs和对应标签targets.数据维度分别如下 imgs.shape = (num, channel, width, height) targets.shape = (num, ...

  4. 【转】python类中super()和__init__()的区别

    [转]python类中super()和__init__()的区别 单继承时super()和__init__()实现的功能是类似的 class Base(object): def __init__(se ...

  5. windows下安装MySql + navicat(图形化界面)

    MySQL安装过程参考:https://www.cnblogs.com/ayyl/p/5978418.html navicat图形化界面安装过程参考:https://www.cnblogs.com/l ...

  6. C#基础巩固之属性

    平常写代码,类中最长用到的字段,属性,方法.虽然经常用属性,但是对属性的认知只是停留在{get;set;}上,也知道可以逻辑判断,只读什么的,没有深入研究: 此篇随笔用来做做属性的文章,加深下认知,文 ...

  7. OpenStack实践系列⑦深入理解neutron和虚拟机

    OpenStack实践系列⑦深入理解neutron和虚拟机 五.深入理解Neutron 5.1 虚拟机网卡和网桥 [root@node1 ~]# ifconfig brq65c11cc3-8e: fl ...

  8. T-SQL DISTINCT子句 去重复

    语法 以下是DISTINCT关键字的基本语法,用于删除重复记录. SELECT DISTINCT column1, column2,.....columnN FROM table_name WHERE ...

  9. springboot:集成fastjson(教训)

    网上有很多介绍,主要有两种. 1.在启动类中注入bean /** * 集成fastjson * * @return */ @Bean public HttpMessageConverters fast ...

  10. c++内存对齐原理

    转载自http://blog.csdn.net/it_yuan/article/details/24651347 #类中的元素 0. 成员变量   1. 成员函数   2. 静态成员变量   3. 静 ...