实现原理:vueRouter控制前端页面跳转路由,当登录成功后,返回用户登录token信息,将token信息放到store中,router路由跳转取store中状态有token时,当取到token时跳转到首页,反之跳转到登录页。

步骤:

1.登陆校验:

2.路由配置:

3.全局导航守卫:

vueRouter.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
// 判断该路由是否需要登录权限
console.log(store)
if (store.state.root.token) { // 通过vuex state获取当前的token是否存在
next()
} else {
alert('请登录')
next({
path: '/' //登录路由
})
}
} else {
next()
}
})

route

vue实现web登陆权限控制的更多相关文章

  1. 基于Vue实现后台系统权限控制

    原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...

  2. ASP.NET MVC5 Forms登陆+权限控制(控制到Action)

    一.Forms认证流程 请先参考如下网址: http://www.cnblogs.com/fish-li/archive/2012/04/15/2450571.html 本文主要介绍使用自定义的身份认 ...

  3. Vue 自定义指令实现权限控制(按钮级)

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的sessionStorage进行存储(这里我是拿到权限按钮按钮的标识,英文名称.把他们合成一个字符串存储在 btnPowerString 中 ...

  4. MVC 基于 AuthorizeAttribute 实现的登陆权限控制

    代码的执行顺序是 OnAuthorization–>AuthorizeCore–>HandleUnauthorizedRequest. 如果AuthorizeCore返回false时,才会 ...

  5. vue - 登录验证与权限控制

    描述具体问题 需求 业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 多个业务系统之间要实现单点登录,即在一个系统或应用已登录的情况下,再访问另一个系统时不需 ...

  6. web api 权限控制

    https://www.cnblogs.com/landeanfen/p/5287064.html 我只是个搬运工, 我只想存个档

  7. vue中如何实现后台管理系统的权限控制

    vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...

  8. shiro登陆权限验证

    一>引入shirojar包 <!-- shiro登陆权限控制 -->        <dependency>            <groupId>org. ...

  9. Vue-Access-Control:前端用户权限控制解决方案

    原文地址:http://refined-x.com/2017/11/28/Vue2.0用户权限控制解决方案/ Vue-Access-Control是一套基于Vue/Vue-Router/axios 实 ...

随机推荐

  1. SQLite3中的日期时间函数使用小结

    代码如下: import sqlite3conn = sqlite3.connect('/tmp/sqlite.db')cur = conn.cursor() 接下来干嘛呢?建一张表吧.这里需要注意的 ...

  2. 测试理论03-svn-缺陷及报告-jira

    回顾--用例设计方法 边界值(三个点,使用步骤) 判定表(适用,四个组成部分,规则,使用) 因果图(适用,四个符号,使用) 正交表(定义,特性,L_n(m^k),因素,水平,使用,工具allpairs ...

  3. spark中的cache和persist的区别

    在使用中一直知其然不知其所以然的地使用RDD.cache(),系统的学习之后发现还有一个与cache功能类似看起来冗余的persist 点进去一探究竟之后发现cache()是persist()的特例, ...

  4. Ubuntu 16.04 haproxy 简单配置应用

    HAproxy HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理.   测试环境 ubuntu16.04 192.168.20 ...

  5. 根据DELTA自动生成SQL语句

    上传客户端的CLIENTDATASET.delta到服务器的clientdataset.data,服务端解析clientdataset的数据生成相应的SQL语句. 相对于直接调用datasetprov ...

  6. (七)Centos之链接命令

    一.链接命令:ln  (link) ln -s [源文件] [目标文件] 功能描述:生成链接文件 选项: -s 创建软链接 二.硬链接 硬链接特征: 1,拥有相同的i节点和存储block块,可以看作是 ...

  7. C# using语句 中间出现exception后 using仍然会dispose

    C# using语句,中间出现exception后,using仍然会dispose,因为: using语句 相当于 try-finally{dispose()}

  8. JsonSchema用法

    JsonSchema用法 简介 JSON Schema是基于JSON格式,用于定义JSON数据结构以及校验JSON数据内容.JSON Schema官网地址:http://json-schema.org ...

  9. lvs整理

    LVS是Linux Virtual Server的简写,即Linux虚拟服务器,是一个虚拟的服务器集群系统.通过LVS提供的负载均衡技术和Linux操作系统实现一个高性能.高可用的服务器群集,它具有良 ...

  10. 使用Vue-Router的导航守卫-无限循环问题

    我在项目里面用到了的是全局守卫,beforeEach,方便管理 不过遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题 当时的代码如下: router.beforeE ...