NProgress的使用 及 路由 token 定向的使用
主要配合路由生命周期使用
实现一个进度条的效果
使用方法:
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 定向的使用的更多相关文章
- vue-element-admin 实现动态路由(从后台查询出菜单列表绑定)
1. 在路由实例中保留基础路由 router/index.js中只需要保留基础路由,其他的都删了 2. 获取用户菜单,并保存到Vuex中 stroe/modules/user.js中,有个getInf ...
- vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
- vue路由守卫配合权限,白名单
router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...
- Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用
在<基于 vite 创建 vue3 项目>一文中整合了 pinia,有不少伙伴不知道 pinia 是什么,本文简单介绍 pinia.主要包括三方面: pinia 的基本用法,在<基于 ...
- Asp.Net MVC中捕捉错误路由并设置默认Not Found页面。
在Global中写一个Application_Error捕捉错误路由并重定向到Not Found页面.这里是全局性抓取错误路由,此处还可以写由错误路由导致访问失败的日志记录. protected vo ...
- react之路由
功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...
- API总结
1. 什么是Webservice WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API,也就是说能用编程的方法通过 Web 来调用这个应用程序.我们把调用这个WebServ ...
- vue 后台管理系统菜单权限管理
来自:https://www.cnblogs.com/fqh123/p/11094296.html 侵删 login登录方法 login() { if (!this.username) { retur ...
- [Abp vNext微服务实践] - vue-element-admin登录二
简介: Vue Element Admin是基于vue.element ui开发的后台管理ui,abp vNext是abp新一代微服务框架.本篇将会介绍如何改造Vue Element Admin权限验 ...
随机推荐
- 07 Redis存储Session
django-redis-sessions 官方文档:https://pypi.org/project/django-redis-sessions/ dango-redis 官方文档:http://n ...
- SpringCloud多网卡配置(转)
https://blog.csdn.net/lixiang987654321/article/details/88134324 docker部署过程中遇到如下问题: (1)docker容器创建之后,进 ...
- Supervisor的使用
版权声明:原创文章欢迎转载,不过要记得加出处哦 https://blog.csdn.net/wljk506/article/details/77146248 supervisord 是Linux/Un ...
- mORMot学习笔记 (一)
官方网站:https://synopse.info/fossil/wiki/Synopse+OpenSource 下载地址:https://synopse.info/fossil/wiki?name= ...
- 【1】Git基础
一.Git概念 1.1.Git定义 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发 ...
- Dedecms限制栏目列表生成的最大页数
首先,我们要登陆DEDECMS后台 >> 系统 >> 站点设置 的同条栏目上,添加一个新的变量,变量名称:cfg_listmaxpage,变量说明:栏目生成列表最大页数,变量值 ...
- fnmatch:Unix式glob模式匹配,简单场景下可以代替正则
介绍 fnmatch模块用于根据glob模式(如Unix shell所使用的的模式)比较文件名 简单匹配 import fnmatch ''' fnmatch将一个文件名与一个模式进行比较,并返回一个 ...
- cnblogs排版样式预览
说明:关于本博主题及样式来源于[GitHub]:本博总体排版目录样式风格参照博文[修仙成神之路]进行预览:参照本博设置可参考博文[设置跟本博一样的效果]本博之前发表过的博文存在样式不协调,后期会逐一完 ...
- namespace" 或The content of element type "mapper" must match "EMPTY"
必须为元素类型 "mapper" 声明属性 "namespace" 或The content of element type "mapper" ...
- PAT Basic 1052 卖个萌 (20 分)
萌萌哒表情符号通常由“手”.“眼”.“口”三个主要部分组成.简单起见,我们假设一个表情符号是按下列格式输出的: [左手]([左眼][口][右眼])[右手] 现给出可选用的符号集合,请你按用户的要求输出 ...