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. 第一次发博,发个简单的Java程序发送手机短信验证

    最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...

  2. ASP.NET Core中使用Autofac

    ⒈添加相关依赖 Install-Package Autofac ⒉扫描项目接口实现类 using Autofac; using System; using System.Collections.Gen ...

  3. Elasticsearch 5.4.3实战--插件安装

    elasticsearch 5.0以后的版本对head的插件支持跟以前不同,安装方法如下:  1. 安装node $ wget https://npm.taobao.org/mirrors/node/ ...

  4. PTA L1题目合集(更新至2019.3)

    L1-001 Hello World (5 分) 链接:https://pintia.cn/problem-sets/994805046380707840/problems/9948051471320 ...

  5. 设计模式C++学习笔记之一(Strategy策略模式)

    无意中,从网上下到一本电子书<24种设计模式介绍与6大设计原则>,很好奇这里有24种设计模式,印象中GOF写的<设计模式>(Design Patterns),好像只有23种吧. ...

  6. bootstrap例子

    <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> &l ...

  7. Vue 核心之数据劫持

    前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现 ...

  8. 持续集成之④:GitLab触发jenkins构建项目

    持续集成之④:GitLab触发jenkins构建项目 一:目的为在公司的测试环境当中一旦开发向gitlab仓库提交成功代码,gitlab通知jenkins进行构建项目.代码质量测试然后部署至测试环境, ...

  9. T-SQL ORDER BY子句 排序方式

    MS SQL Server ORDER BY子句用于根据一个或多个列以升序或降序对数据进行排序. 默认情况下,一些数据库排序查询结果按升序排列. 语法 以下是ORDER BY子句的基本语法. SELE ...

  10. selenium之css定位小结

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...