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权限验 ...
随机推荐
- 2.2 使用 JAXP 对XML文档进行SAX解析
使用JAXP 对 XML文档进行 SAX解析: public class Demo1 { /** * 使用JAXP对XML文档进行SAX解析 * @throws Exception * @throws ...
- 【Day4】3.urllib模块使用案例
import urllib.request as ur ret = ur.urlopen('https://edu.csdn.net/').read() with open('edu.html','w ...
- 【Day3】1.正则表达式
1.正则表达式 2.案例 关闭贪婪模式
- 【Day2】4.第三方模块的安装与使用
课程目标 1. 使用模块 2. 安装第三方模块 使用模块 • 一个.Py文件称之为一个模块(Module) • 好处: 1. 便于代码维护,把很多函数放到不同文件,一个.py文件 的 代码数量少 2. ...
- 前端基础(四):BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- Django框架orm
一.django目录 二.登录注册 三.三件套 四.orm简介 五.基于orm的用户登录 一.django目录 -settings -urls -views -强调:setting中的'django. ...
- Linux文件系统之mv(重命名/移动文件)
mv(move)命令 输入man mv,了解到mv命令是用于移动或重命名文件 语法 mv [options] source dest mv [options] source... directory ...
- prometheus部署
1.prometheus安装 软件下载: wget https://dl.grafana.com/oss/release/grafana-6.4.2-1.x86_64.rpm https://gith ...
- hlslcc
https://cdn2.unrealengine.com/Resources/files/UE4_OpenGL4_GDC2014-514746542.pdf ue的跨平台编译器 hlsl cross ...
- Spark任务调度初识
前置知识 spark任务模型 job:action的调用,触发了DAG的提交和整个job的执行. stage:stage是由是否shuffle来划分,如果发生shuffle,则分为2个stage. t ...