为什么需要路由元呢???

  博猪最近开发刚刚好遇到一个情况,就是有个路由页面里面包含了客户的信息,客户想进这个路由页面的话,

就可以通过请求数据获取该信息,但是如果客户没有登录的话,是不能进到该页面的,于是我们就用到路由元了。

我们在router.js里面配置:

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
meta: {unLogin: true} //这里配置meta作为标识,unLogin为true的话,就需要用户的登录权限
}
]
})
router.beforeEach((to, from, next) => {
if (!to.meta.unLogin) { // 判断该路由是否需要登录权限
if (localStorage.getItem('userMsg')) { //localStorage.getItem('userMsg')是登录后本地保存登录的信息,只有已登录才有
next();
}
else {
next({
path: '/user/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next();
}
});

OK,以上就是路由元的使用方法。

************************   END   ************************

vue路由元之进入路由需要用户登录权限功能的更多相关文章

  1. flask 开发用户登录注册功能

    flask 开发用户登录注册功能 flask开发过程议案需要四个模块:html页面模板.form表单.db数据库操作.app视图函数 1.主程序 # app.py # Auther: hhh5460 ...

  2. springmvc拦截器实现用户登录权限验证

    实现用户登录权限验证 先看一下我的项目的目录,我是在intellij idea 上开发的 1.先创建一个User类 package cn.lzc.po; public class User { pri ...

  3. Java Spring+Mysql+Mybatis 实现用户登录注册功能

    前言: 最近在学习Java的编程,前辈让我写一个包含数据库和前端的用户登录功能,通过看博客等我先是写了一个最基础的servlet+jsp,再到后来开始用maven进行编程,最终的完成版是一个 Spri ...

  4. springMVC中实现用户登录权限验证

    通过上网搜资料显示,使用filter和interceptor都可以实现.不过推荐使用interceptor. 下面就使用Interceptor实现用户登录权限验证功能. 拦截器需要实现Inceptor ...

  5. JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

    一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

  6. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  7. SpringMVC+Apache Shiro+JPA(hibernate)案例教学(二)基于SpringMVC+Shiro的用户登录权限验证

    序: 在上一篇中,咱们已经对于项目已经做了基本的配置,这一篇文章开始学习Shiro如何对登录进行验证. 教学: 一.Shiro配置的简要说明. 有心人可能注意到了,在上一章的applicationCo ...

  8. html页面通过http访问mysql数据库中的内容,实现用户登录的功能

    需求: 通过html编写用户登录页面,页面内容包括用户名.密码和登录按钮,点击登录后访问login.php文件,使用按钮默认的submit提交用户名和密码,在login.php中访问mysql数据库, ...

  9. 利用PHP连接数据库——实现用户登录注册功能以及管理员对用户注册的审核功能

    1.用户注册页面 页面效果: 代码如下: <!DOCTYPE html><html>    <head>        <meta charset=" ...

随机推荐

  1. Rescue BFS+优先队列 杭电1242

    思路 : 优先队列 每次都取最小的时间,遇到了终点直接就输出 #include<iostream> #include<queue> #include<cstring> ...

  2. [转+自]关于PHP7的新特性(涉及取反和disabled_functions绕过)

    PHP7和PHP5上的安全区别 preg_replace()不再支持/e修饰符 利用\e修饰符执行代码的后门大家也用了不少了,具体看官方的这段描述: 如果设置了这个被弃用的修饰符, preg_repl ...

  3. 硬盘性能测试工具之bonnie++

    bonnie++ 官方站点 先写内存的两倍,内存较大时比较耗时.适合简单的测试场景. # bonnie++ -u root 写测试 读测试 Version 1.97 ------Sequential ...

  4. Android--sos闪光灯

    Camera camera = null; Parameters parameters = null; Handler handler = new Handler() { @Override publ ...

  5. Python学习17之类3继承

    '''''''''继承:在继承原有类功能的基础上,增加新的功能(属性或者方法),形成新的类被继承的类:父类新的类:子类 格式:class 子类(父类) class 子类(父类1,父类2,父类3...) ...

  6. [Windows] 如何用编程的方式格式化硬盘

    If memory serves, you're looking for SHFormatDrive(). Use the Format method of the Win32_Volume clas ...

  7. Spring Cloud 系列之 Stream 消息驱动(二)

    本篇文章为系列文章,未读第一集的同学请猛戳这里:Spring Cloud 系列之 Stream 消息驱动(一) 本篇文章讲解 Stream 如何实现消息分组和消息分区. 消息分组 如果有多个消息消费者 ...

  8. Swoole 实战:MySQL 查询器的实现(协程连接池版)

    目录 需求分析 使用示例 模块设计 UML 类图 入口 事务 连接池 连接 查询器的组装 总结 需求分析 本篇我们将通过 Swoole 实现一个自带连接池的 MySQL 查询器: 支持通过链式调用构造 ...

  9. event兼容性解决

    event出现undefind错误 解决方法: $('#normalImgDiv').mousemove(function (e) { var e = window.event || e; var p ...

  10. Netty(一):ByteBuf读写过程图解

    我们知道ByteBuf通过读写两个索引分离,避免了NIO中ByteBuffer中读写模式切换时,需要flip等繁琐的操作. 今天就通过一段测试代码以及图例来直观的了解下ByteBuf中的readInd ...