Vue router拦截 如果用户并未登录直接跳转到登录界面(最简单的cookie演示)
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演示)的更多相关文章
- vue router拦截器的简单使用
之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...
- javaweb-实现不同用户登录后跳转到不同界面
今天下午,实现了公文流转系统的一小部分——登录界面验证不同用户跳转到不同界面 Dao package com.office.Dao; import java.sql.Connection; impor ...
- Laravel 登录后跳转回登录前浏览的页面
一.经过 Auth 中间件检查后跳转至登录页面 也就是没有通过 auth 中间件的认证检查,被 auth 中间件拦截后跳转至登录页面.这种情况下,Laravel 默认会在用户登录成功后自动跳转回登录前 ...
- yii中登录后跳转回登录前请求的页面
当我们请求一个经过权限控制的请求不通过时,会跳转到一个地方请求权限,请求结束后需要跳转回之前的页面.比如我们请求一个需要登录的action,会被跳转到login页面,我们希望登录成功后跳转到我们之前希 ...
- 怎么实现登录之后跳转到登录之前的页面?SpringMVC+Freemarker
项目中,想实现一个功能. 直接访问某个需要登录的url,比如/addArticle,可能会跳转到登录页面login.html. 登录成功之后,自动跳转到/addArticle这个登录前的页面,继续登录 ...
- 登录之后跳转到登录之前的页面 之 Referer 的坑
简而言之:通过鼠标在页面上点击链接发送请求,请求header中会包含referer信息, 通过在浏览器地址栏书写并发送请求的,header中不会有referer信息. 为了完成登录动作成功后返回原页面 ...
- rails登录后跳转到登录前的路径
# 重定向到存储的地址或默认地址 def redirect_back_or(default) redirect_to(session[:forwarding_url] || default) sess ...
- SpringBoot 拦截器--只允许进入登录注册页面,没登录不允许查看其它页面
SpringBoot注册登录(一):User表的设计点击打开链接 SpringBoot注册登录(二):注册---验证码kaptcha的实现点击打开链接 SpringBoot注册登录(三):注册--验证 ...
- VUE实现登录然后跳转到原来的页面
可以在路由里面设置需要登录的界面,判断下没有登录就跳转到登录界面,登录了就不用登录,这里用的是一个存储的 router.beforeEach((to, from, next) => { if(t ...
随机推荐
- HashSet、TreeSet和LinkedHashSet分别基于HashMap、TreeMap和LinkedHashMap
1.如果你需要一个访问快速的Set,你应该使用HashSet: 当你需要一个排序的Set,你应该使用TreeSet: 当你需要记录下插入时的顺序时,你应该使用LinedHashSet. 2.因为Tre ...
- 主线程中的Looper.loop()一直无限循环为什么不会造成ANR
待归纳 https://www.jianshu.com/p/cfe50b8b0a41 https://blog.csdn.net/cjh94520/article/details/71022883 那 ...
- linux 工具学习网站
推荐一个很不错的linux工具学习网站; 对于一个开发人员来说,我觉得掌握这些工具对于基于linux的应用开发来说事半功倍. http://linuxtools-rst.readthedocs.io/ ...
- [转] 隐马尔可夫(HMM)、前/后向算法、Viterbi算法 再次总结
最近工作需要优化LSTM-CRF经典模型中的维特比解码部分,发现对维特比一直是个模糊概念,没有get到本质,搜了一圈,发现一篇好文,mark 博主不让转载,mark个地址吧: https://blog ...
- ubuntu server命令行搭建虚拟专用网
问题: 在做一个国外的开源项目,需要用到很多 ubuntu 上特定版本的应用,由于国内墙的问题,导致Ubuntu 14.04在需要添加一些国外的库的时候(add-apt-repository ppa: ...
- ES6学习笔记四(类和对象)
{ // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...
- Ridis
Redis介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的values类型相对更多,包括字符串.列表.哈希散列表.集合,有序集合. 这些数据类型都支持push/ ...
- centos6.8配置php-fpm(php已在apache中以模块形式运行,nginx中同时以fastcgi运行)
location ~ \.php(.*)$ { root /mnt/www/wenyin; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; ...
- .net 项目与网站区别
背景 .net 的又一个杰作,我作为资深开发人员,好久没搞明白两者关系,后来慢慢总算琢磨明白了.在2003和2005的时候,都是用的网站方式,后来见到某同事用的项目方式,当时还很不理解,真是个傻瓜程序 ...
- vue 控制 input 的 disabled
<input type="number" v-model="item.rvb07_1" :disabled="type == 'receiveN ...