vue-router判断页面未登录自动跳转到登录页的方法示例

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录

下面的两个页面，登录页不需要检测，首页需要检测

const routers = [
{
   path: '/',
   component: App,
　　 children: [
　　　 {
　　　　path: '/login',
　　　 component: Login,
   meta: {
    title: '登录'

   }
　　 },
　　　{
　　　　path: '/home',
　　　 component: Home,
   meta: {
    title: '首页',
    requireAuth: true
   }
　　 }
　　]
}
]
export default routers

2.main.js

返回遍历的某个路由对象，我们定义为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测meta对象是不是有requireAuth这个属性且为true

检测到需要登录权限后，我的做法是请求接口判断用户是否登录

如果未登录，跳转到登录页面；如果已经登录，确保要调用next()方法，否则钩子就不会被resolved

router.beforeEach((to, from, next) => {
 /* 页面title */
 if (to.meta.title) {
  document.title = to.meta.title
 }
 /* 判断该路由是否需要登录权限 */
 if (to.matched.some(record => record.meta.requireAuth)) {
  //是否登录
  axios.post('/home/user/isLogin')
    .then(function (response) {
      if (response.data.code == 0) {
        //未登录
        if (response.data.data.online == 0) {
          next({
            path: '/login',
          })
        } else {
          //已登录
          next()
        }
      }
    })
    .catch(function (error) {
      // Toast(error.data.msg);
    });

 }
 next();
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-router导航守卫

    详解vue-router导航守卫

    当做Vue-cli项目的时候需要在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards).组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter .beforeRouteUpdate(2.2 新增) .beforeRouteLeave). 钩子(Hook),早期编程可能有个概念叫句柄,不知道将两者类比而且强行归为一类是不是合适.钩子的用处是在某个

  • vue-router beforeEach跳转路由验证用户登录状态

    使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向. 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态.也可以结合sessionStorage 和localStorage使用,原理相同. 用户登录状态验证 路由配置 定义需要判断登录状态的

  • Vue核心概念Getter的使用方法

    Vue核心概念Getter的使用方法

    有时候我们需要从store中的state中派生出一些状态. 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它--无论哪种方式都不是很理想. Vuex 允许我们在store中定义getter属性(可以认为是 store 的计算属性).就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 比如这里我们在Page4.vue里面需要对商品价格加倍,我们就可以使用Getter. 使用Getter store

  • Vuex中的State使用介绍

    Vuex中的State使用介绍

    现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State. Vuex 使用单一状态树--是的,用一个对象就包含了全部的应用层级状态.至此它便作为一个"唯一数据源 (SSOT)"而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照. 单状态树和模块化并不冲突--在后面的章节里我们会讨论如何将状态和状态变

  • vue-router重定向和路由别名的使用讲解

    vue-router重定向和路由别名的使用讲解

    一.重定向(你访问这个路径,但他跳到另一个路径,地址栏中显示目标路由的那个路径) "重定向"的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b 二.路由别名(就是给这个路由起了个名字,访问这个路由的时候不需要访问path 而是访问alias后面的) /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样. 上面对应的路由配置为: const router = new VueRouter({

  • vue-router懒加载速度缓慢问题及解决方法

    vue-router懒加载速度缓慢问题及解决方法

    懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import

  • vue-router传递参数的几种方式实例详解

    vue-router传递参数分为两大类 编程式的导航 router.push 声明式的导航 <router-link> 编程式的导航 router.push 编程式导航传递参数有两种类型:字符串.对象. 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数: this.$router.push("home"); 对象 想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由.查询参数,下面分别说明两种方式的用法和注意事项. 命名路由

  • vue-router启用history模式下的开发及非根目录部署方法

     为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

  • 对 Vue-Router 进行单元测试的方法

    由于路由通常会把多个组件牵扯到一起操作,所以一般对其的测试都在 端到端/集成 阶段进行,处于测试金字塔的上层.不过,做一些路由的单元测试还是大有益处的. 对于与路由交互的组件,有两种测试方式: 使用一个真正的 router 实例 mock 掉 $route  和 $router  全局对象 因为大多数 Vue 应用用的都是官方的 Vue Router,所以本文会谈谈这个. 创建组件 我们会弄一个简单的 <App>,包含一个  /nested-child  路由.访问 /nested-child

  • 在移动端使用vue-router和keep-alive的方法示例

    对于web开发和移动端开发,两者在路由上的处理是不同的.对于移动端来说,页面的路由是相当于栈的结构的.vue-router与keep-alive提供的路由体验与移动端是有一定差别的,因此常常开发微信公众号的我想通过一些尝试来将两者的体验拉近一些. 目标 问题 首先一个问题是keep-alive的行为.我们可以通过keep-alive来保存页面状态,但这样的行为对于类似于APP的体验是有些奇怪的.例如我们的应用有首页.列表页.详情页3个页面,当我们从列表页进入详情页再返回,此时列表页应当是keep

随机推荐