首页 > 其他分享 >全局路由守卫

全局路由守卫

时间:2024-01-16 16:22:09浏览次数:30  
标签:登录 sessionStorage next 守卫 router 全局 login 路由 页面

需求:

1.有一个登录页面和主页面

2.没有登录无法访问主页面,并重定向到登录页面

3.登录后可正常访问主页面

 

实现方式:

router/index.js下书写:

router.beforeEach((to, from, next) => {
    // 访问的是登录页面或sessionStorage内有值
    if (to.name == 'login' || sessionStorage.getItem('username')) {
        next()
    } else {
        // 重定向到登录页面
        next('/login')
    }
})

 

sessionStorage内设置值

sessionStorage('key','value')

 

标签:登录,sessionStorage,next,守卫,router,全局,login,路由,页面
From: https://www.cnblogs.com/wellplayed/p/17967946

相关文章

  • 《全局实例篇》Vue.compont注册全局组件
    注册一个全局组件语法格式如下:Vue.component(tagName,options)tagName为组件名,options为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName>全局组件所有实例都能用全局组件。<divid="app"> <runoob></runoob></div><script>//注册Vue.compon......
  • 《路由篇》路由
    路由参考链接:https://www.cnblogs.com/chengqiang521/p/15512719.htmlrouter是什么路由,一个router就是一组key-value对,只不过这里的key是路径,就是path,value是组件。基本使用1安装vue-routernpmivue-router2应用插件Vue.use(VueRouter)3编写router配置项点击查看代......
  • springboot + mybatis plus 全局添加查询字段反引号
    配置文件添加: column-format:"`%s`"mybatis-plus:#启动时是否检查MyBatisXML文件是否存在check-config-location:true#MyBatis原生配置configuration:#字段名称下划线转驼峰命名map-underscore-to-camel-case:trueglobal-config:db-co......
  • 5G穿墙王!TP-LINK发布BE5100 Wi-Fi 7路由器:2.5G网口 279元
    1月14日消息,日前,TP-LINK发布BE5100Wi-Fi7路由器,到手价279元,支持MLO、4KQAM、MRU、前导打孔等Wi-Fi7新特性。据介绍,在MLO多链路技术加持下,2.4G+5G叠加快至7.3倍,4KQAM高阶调制,速率提升至120%。MRU技术允许将多个资源块分配给单个用户,提升传输效率,降低延迟。TP-LINKBE5100......
  • SpringBoot enter door基础_配springBoot项目,读取配置,配置全局异常捕获
    1、Spring是重量级企业开发框架 EnterpriseJavaBean(EJB) 的替代品,Spring为企业级Java开发提供了一种相对简单的方法,通过 依赖注入 和 面向切面编程 ,用简单的 Java对象(PlainOldJavaObject,POJO) 实现了EJB的功能虽然Spring的组件代码是轻量级的,但它的配置却是重......
  • Django 请求到来与路由匹配
    Django请求到来与路由匹配说明:本部分主要讲述请求到来与路由匹配的部分;1.请求到来上次分析到了wsgi的函数内部处理信息,我们已经知道请求到了之后会执行__call__方法,下面将继续分析__call__方法。classWSGIHandler(base.BaseHandler):#继承BaseHandlerrequest......
  • NGINX 路由配置与参数详解(https配置、跨域配置、socket配置)
    目录一、概述二、https配置1)获取SSL证书2)安装SSL证书3)Nginx配置修改4)重新加载Nginx配置三、nginx跨域配置四、nginxsocket配置五、NGINX路由配置1)基本的URI匹配2)nginx中斜杠(/)1、location以斜杠结尾,proxy_pass不以斜杠结尾2、location不以斜杠结尾,proxy_pass......
  • 路由器系列--【如何使用路由器组成一个局域网?】
    1.原理如图2.设置常用参数常用DNS:114.114.114.114、8.8.8.8常用子网掩码:255.255.255.0ip地址:和路由器网关地址保持在同一网段即可这样设置完之后,如果路由器能联网,几台电脑也能正常联网。如果路由器不能联网,几台电脑之间可以相互访问,也就是组成了一个大局域网。如果有一台......
  • 【C语言】全局变量与局部变量
    在不同的函数之间传递数据时,可以使用如下方法:参数:通过形参和实参返回值:用return语句返回计算结果全局变量全局变量与局部变量全局变量:函数之外定义的变量称为全局变量(外部变量);局部变量:在一个函数内部定义的变量称为局部变量(内部变量)。全局变量使用:#include<stdio.h......
  • Flutter Getx 路由管理
    GetX为我们封装了Navigation,无需context可进行跳转,使用GetX进行路由跳转非常的简单,只需要调用Get.to()即可进行路由跳转,GetX路由跳转简化了跳转动画设置、动画时长定义、动画曲线设置。Get.to()实现普通路由跳转一、设置应用程序入口当我们导入依赖后,在应用程序......