主要配合路由生命周期使用

  实现一个进度条的效果

  使用方法:

    1. 下载:npm install --save nprogress

    使用:NProgress.start();  开始

       NProgress.done(); 停止

  在 router 中使用路由守卫

  token 重定向的使用

  router.beforeEach(to, from, next){

    const isLogin = localStorage.eleToken ? true : false;

    if (to.path == '/login' || to.path == '/register'){

      next();

    }

    else {

      isLogin ? next() : next('/login');

    }

  }

NProgress的使用 及 路由 token 定向的使用的更多相关文章

  1. vue-element-admin 实现动态路由(从后台查询出菜单列表绑定)

    1. 在路由实例中保留基础路由 router/index.js中只需要保留基础路由,其他的都删了 2. 获取用户菜单,并保存到Vuex中 stroe/modules/user.js中,有个getInf ...

  2. vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏

    这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...

  3. vue路由守卫配合权限,白名单

    router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...

  4. Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用

    在<基于 vite 创建 vue3 项目>一文中整合了 pinia,有不少伙伴不知道 pinia 是什么,本文简单介绍 pinia.主要包括三方面: pinia 的基本用法,在<基于 ...

  5. Asp.Net MVC中捕捉错误路由并设置默认Not Found页面。

    在Global中写一个Application_Error捕捉错误路由并重定向到Not Found页面.这里是全局性抓取错误路由,此处还可以写由错误路由导致访问失败的日志记录. protected vo ...

  6. react之路由

    功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...

  7. API总结

    1. 什么是Webservice WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API,也就是说能用编程的方法通过 Web 来调用这个应用程序.我们把调用这个WebServ ...

  8. vue 后台管理系统菜单权限管理

    来自:https://www.cnblogs.com/fqh123/p/11094296.html 侵删 login登录方法 login() { if (!this.username) { retur ...

  9. [Abp vNext微服务实践] - vue-element-admin登录二

    简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...

随机推荐

  1. 小程序 ----踩坑 ---安卓iOS兼容等

    关于小程序一些小功能的代码都在这个GitHub上,感兴趣的可以去看看,https://github.com/huihuijiang/miniProgram目前有:列表左滑删除,拖拽浮标 一.小程序坑1 ...

  2. SpringBoot--多环境部署配置文件

    在resources 下创建 application-{profile}.properties 的配置文件,其中profile是任意名字: test:测试环境 prod:线上环境 pre-prod:预 ...

  3. canvas-绘制矩形-读书笔记

    使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小. 要在画布上绘图,需要取得绘图上下文,也就是要调用getContext()方法并传入上下文的名字 ...

  4. 统一用户认证系统CUAS实现要点

    背景: 基于目前存在多套员工使用的日常工作子系统,现状为各系统各自有一套用户体系,员工需要记住各系统的用户名.密码等信息,还需要登录多个系统,重复工作量颇多.统一用户认证组件将用户名.密码等信息统一存 ...

  5. debian设置limits.conf

    最近已经把自己的游戏框架主要功能完成得差不多了,决定将自己的开发环境从debian7升级到debian9,不然太多第三方依赖都跟不上了.debian10刚出来,MongoDB还没适配,所以暂不考虑. ...

  6. sessionStorage 与 localStorage 重新认识?

    之前写过一次关于 js存储的总结,但是今天在项目中遇到一个bug让我重新在认识 sessionStorage 与 localStorage.以下的介绍都是基于同源下进行的,仔细看下面的案例: a.ht ...

  7. GenericJDBCException: could not execute statement 错误解决

    "message":"could not execute statement; nested exception is org.hibernate.exception.G ...

  8. PC客户端自动化测试工具--pywinauto

    1.安装 pywinauto pip install pywinauto 2.打开PC的.exe可执行文件的,一种方式就够用了 from pywinauto import application ap ...

  9. React给state赋值的两种写法

    如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...

  10. BZOJ5017 [Snoi2017]炸弹[线段树优化建边+scc缩点+DAG上DP/线性递推]

    方法一: 朴素思路:果断建图,每次二分出一个区间然后要向这个区间每个点连有向边,然后一个环的话是可以互相引爆的,缩点之后就是一个DAG,求每个点出发有多少可达点. 然后注意两个问题: 上述建边显然$n ...