实现 退出登陆  无法回退到其它页面

当有登陆状态时  可以拿其它页面的地址直接访问

若没有登陆状态   拿其它页面的地址直接访问 会报错

router.beforeEach((to, from, next) => {
if(to.name=='login'){//若是登陆页面
if(localStorage.getItem("loginStatus")&&localStorage.getItem("loginStatus")=="login"){//判断是否有登陆状态 若有就免登陆 直接跳到个人信息页
console.log("有登陆状态的 登陆的首页");
next({
name:'personalInfo'
});
return;
}else{
console.log("无登陆状态的 登陆的首页");
next();
return;
}
}else{//若不是登录页
console.log('不是登录页');
if(localStorage.getItem("loginStatus")&&localStorage.getItem("loginStatus")=="login"){//没登陆状态时 提示地址错误
next();
return;
}else if(to.name=='register'){
next();
return;
}else{
if(global.ordermark!=''&&global.lang!=''){//有没有ordermark和lang
var origin=window.location.origin;
var url;
if(process.env.NODE_ENV === 'production'){
url=origin+'/dist/#/'+global.ordermark+'/'+global.lang;
}else{
url=origin+'/#/'+global.ordermark+'/'+global.lang;
}
window.location.href=url;
return;
}else{
tools.alert("地址错误!请重新登陆");
return;
}
}
}
next();
})

一次router拦截器的应用的更多相关文章

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

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

  2. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  3. vue拦截器实现统一token,并兼容IE9验证

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...

  4. Axios Token验证拦截器

    import axios from 'axios'; // req拦截 axios.interceptors.request.use( //设置头部的token config.headers['tok ...

  5. vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置

    之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...

  6. [代码笔记]VUE路由根据返回状态判断添加响应拦截器

    //返回状态判断(添加响应拦截器) Axios.interceptors.response.use( res => { //对响应数据做些事 if (res.data && !r ...

  7. vue 根据接口返回的状态码判断用户登录状态并跳转登录页,登录后回到上一个页面(http拦截器)

    背景:后台接口返回code==501表示用户是未登录状态,需要登录才可访问: 通过http拦截做路由跳转 第一步:src目录下新建http.js文件,内容如下: import Axios from ' ...

  8. 「Vue」登陆-路由拦截器

    1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

随机推荐

  1. 20190716-Python网络数据采集/第 2 章 复杂HTML解析

    # P29/9# 解析,要考虑到可持续性问题,对方反爬修改后,仍继续有效,方为优秀代码# 解析一个目标网页前,需要做到以下几点:(1)明确目标内容:(2)寻找“打印此页”的链接,或查看网站有无HTML ...

  2. Python---通配符的使用

    苹果单价 9.00 元/斤,购买了 5.00 斤,需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台 如果希望输出文字信息的同时,一起输出 数据,就需要使用到  ...

  3. WPF入门(1)——DataContext

    在WPF中,应用程序有两层:UI层和Data层.这里新建一个项目说明哪些是UI层,哪些是数据层. UI层很明显,就是用户看到的界面.但是数据层并不是下图所示: 上图中是UI层view的后台代码.当然, ...

  4. 用Lua的协程实现类似Unity协程的语句块

    local co_time_tbl = {} setmetatable(co_time_tbl, { __len = function(o) for k, v in pairs(o) do count ...

  5. php 压缩接口

    function rtnJson($obj) { if (!headers_sent() && // 如果页面头部信息还没有输出 extension_loaded("zlib ...

  6. C# 使用Emit实现动态AOP框架 (一)

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  7. [转载]机器学习优化方法总结:SGD,Momentum,AdaGrad,RMSProp,Adam

    [转载]机器学习优化方法总结:SGD,Momentum,AdaGrad,RMSProp,Adam https://blog.csdn.net/u010089444/article/details/76 ...

  8. JS数组判断,方法

    怎么判断一个对象是不是数组? 首先可以用 ES5 提供的 isArray 方法进行判断(注意:Array.isArray是ES 5.1推出的,不支持IE6~8,所以在使用的时候也应注意兼容问题. ) ...

  9. ASP.NET---如何使用web api创建web服务

    1 首先创建asp.net web空项目,并且创建模拟数据,我在工程下面创建了一个Models文件夹,在文件夹Nodels下面创建类Product和Repository 具体如下: [Serializ ...

  10. Oracle创建索引;查询索引

    1.创建索引 create index 索引名 on 表名(列名); 2.删除索引 drop index 索引名; 3.创建组合索引 create index 索引名 on 表名(列名1,,列名2); ...