网页一进入判断是否登录,未登录跳转到登录页面

router.js

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
title: '首页',
requiresAuth: true // 是否需要判断是否登录
}
},
{
path: '/login',
name: 'login',
component: login,
meta: {
title: 'login'
}
}
]
})

main.js

router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
// 判断该路由是否需要登录权限
if (to.matched.some(record => record.meta.requiresAuth)) {
if (to.name === 'login') {
next()
} else if (localStorage.getItem('token')) {
// 访问服务器缓存数据,判断当前token是否失效
Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
// console.log('是否登录',num);
if(num.code==1001){
next();
} else{
alert('您的token已超时,请重新登录');
next('/Login');
}
})
} else {
next('/Login')
}
} else {
next()
}
})

vue 判断是否登录,未登录跳转到登录页的更多相关文章

  1. dede用户登录时,跳转到提示页时报404错误

    做了一个项目,本地运行,用的是Apache服务器,一切正常. 可是当我把项目放到VPS中运行时,每当输入用户名登录时,调转到"成功登录,3秒钟后转向网站主页"的提示页面时,页面的顶 ...

  2. vue实现未登录跳转到登录页面

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...

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

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

  4. Vue-router路由判断页面未登录跳转到登录页面

    router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...

  5. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  6. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  7. Vue router拦截 如果用户并未登录直接跳转到登录界面(最简单的cookie演示)

    router.beforeEach(function(to,from,next){ console.log('路由拦截') console.log(to.name) console.log(from. ...

  8. javaweb关于用户是否登录全局判断,没有登录跳转到登录界面

    有这样一个需求,用户密码登录网站,在session中保留了用户的信息,但是用户很长时间没有再操作该界面,用户的session则被浏览器清除,而一些业务逻辑则是需要用到用户的信息,那么用户再执行操作后, ...

  9. vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫

    上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...

随机推荐

  1. c#spinLock使用

        版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011915028/article/details/53011811 一下解释摘自msdn  ...

  2. hibernate课程 初探单表映射2-7 hbm配置文件常用设置

    本节主要简介hbm配置文件以下内容: 1 mapping标签 2 class标签 3 id标签 1 hibbernate-mapping标签 schema 模式名称 catalog 目录名称 defa ...

  3. jsp连接sqlite、Sqlite相对路径绝对路径问题(转)

    转自  http://blog.csdn.net/sxy12138/article/details/52304884 假如在java中, # 数据库连接jdbc.jdbc-url=jdbc:sqlit ...

  4. Apache activiti5.13工作流框架的表结构详解

    1.结构设计 1.1.    逻辑结构设计 Activiti使用到的表都是ACT_开头的. ACT_RE_*: ’RE’表示repository(存储),RepositoryService接口所操作的 ...

  5. 响应式及Bootstrap

    一丶CSS3的@media 查询 使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@med ...

  6. angular 学习笔记(3) ng-repeat遍历json并且给样式

    视图: <div ng-app="myapp" ng-controller="myctrl"> <ul> <li ng-repea ...

  7. hibernate笔记3--hql查询

    1.Query:他是一种比较面向对象的查询方式,query查询也叫做hql查询(hibernate query language),使用query查询,需要接受一个         hql语句进行查询 ...

  8. 阻止Bootstrap 模态框(Modal)点击空白处时关闭

    默认情况下点击空白处时会关闭模态框,添加data-backdrop="static"后可以阻止关闭

  9. web调试的一些小技巧

    1.不带缓存的刷新,用于刷新css或者js:Ctrl+F5 待续...

  10. jQuery_2_常规选择器-简单选择器

    JQuery最核心的组成部分就是:选择器引擎.它继承了css的语法,可以对DOM元素的标签名.属性名.状态等进行快速准确的选择. jQuery选择器的写法与CSS 选择器十分类似,只不过他们的功能不同 ...