vue 利用路由守卫判断是否登录的方法

2024-03-30 23:07:56

1.在router下的index.js 路由文件下，引入相关需要文件；

import Vue from 'vue'

import Router from 'vue-router'
import {LOGIN} from '../common/js/islogin'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/page/Login'
import Index from '@/page/index/index'Vue.use(Router);

2.配置相关路由

const router = new Router({

 routes: [
 {
  path: '/',
  redirect: '/login'
 },
 {
  path: '/login',
  component: Login
 },
 {
  path: '/index',
  meta: {
  requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
  },
  component: Index
 }
 ]
});

3.路由配置完后，根据需要登录的页面判断路由跳转

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) {   //如果需要跳转 ，往下走（1）
 if (true) {   //判断是否登录过，如果有登陆过，说明有token,或者token未过期，可以跳过登录（2）
  if (to.path === '/login') { //判断下一个路由是否为要验证的路由（3）
  next('/index');   // 如果是直接跳到首页，
  } else {    //如果该路由不需要验证，那么直接往后走
  next();
  }
 } else {
  console.log('没有');  //如果没有登陆过，或者token 过期， 那么跳转到登录页
  next('/login');
 }
 } else {       //不需要跳转，直接往下走
 next();
 }
});export default router;

以上这篇vue 利用路由守卫判断是否登录的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单
Vue的路由动态重定向和导航守卫实例

根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下: 重定向重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: [ { path: '/a', r
vue2.0 实现导航守卫的具体用法（路由守卫）

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫你可以使用 router.beforeEa
vue路由守卫+登录态管理实例分析

本文实例讲述了vue路由守卫+登录态管理.分享给大家供大家参考,具体如下: 在路由文件需要守卫的path后面加上meta {path: '/home',component: home,meta:{requireAuth:true}} 在main.js里面加上 //路由守卫 router.beforeEach((to, from, next) => { console.log(to); console.log(from); if (to.meta.requireAuth) { // 判断该路由是否
vue2.0 实现导航守卫（路由守卫）

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫你可以使用 router.beforeEa
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求.对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 先来摘抄一段文档中beforeRou
vue路由导航守卫和请求拦截以及基于node的token认证的方法

什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的情况下,再访问另一个系统时不需要重复登录:在登录过期或失效时,需要重定向到登录页面如何使用路由守卫定义一个index.js页面用来定义页面的路由,代码如下: import Vue from 'vue' import Router from 'vue-router' import blogIndex fro
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

#在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate
vue路由守卫及路由守卫无限循环问题详析

先贴一波官方文档的内容 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. 每个守卫方法接收三个参数: to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用
vue-router 实现导航守卫（路由卫士）的实例代码

导航守卫导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router

vue 利用路由守卫判断是否登录的方法

相关推荐

随机推荐