实现原理: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. Echarts常用API(echarts和echartsInstance)

    一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...

  2. 搭建JavaWeb应用开发环境——Tomcat服务器

    学习web开发,需要先安装一台web服务器,然后再在web服务器中开发相应的web资源,供用户使用浏览器访问. 搭建JavaWeb应用开发环境——Tomcat服务器 1.疑问:学习web开发,为什么必 ...

  3. IDEA导航光标回退和前进快捷键失效

    工作中突然发现IDEA里的Ctrl+Alt+Left/Right失效了,即导航光标的回退和前进,影响看代码的效率. 用Windows Hotkey Explorer查看,发现是被igfxHK.exe进 ...

  4. VMware Workstation虚拟机打开系统时,提示“无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件。是否在安装 VMware Workstation 后重新引导?”

    VMware Workstation虚拟机打开系统时,提示“无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件.是否在安装 VMware Workstation 后重新引导? ...

  5. XMind 快捷键完整命令

      XMind 快捷键完整命令 快捷键(Windows) 快捷键(Mac) 描述 + + 展开当前分支 - - 收缩当前分支 * * 展开所有分支 / / 收缩所有分支 Alt+- Alt+- 显示系 ...

  6. E: dpkg was interrupted, you must manually run 'dpkg --configure -a' to correct the problem. 爆错解决办法

    author  :headsen chen date : 2019-06-06  10:09:06 root@ubuntu:~# apt-get remove java-1.8.0-openjdk E ...

  7. Web安全测试检查点

    Web安全测试检查点 上传功能 1.绕过文件上传检查功能 2.上传文件大小和次数限制 注册功能 1.注册请求是否安全传输 2.注册时密码复杂度是否后台检验 3.激活链接测试 4.重复注册 5.批量注册 ...

  8. paint之文字示例

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  9. MediaElement 不能显示的问题

    1.记得在窗体的 Load 事件里面调用 Player1.Play();方法,就可以在窗体加载后就直接播放视频 2.WPF MediaElement其实和Windows系统自带的播放器是一样的,因此W ...

  10. 斑马打印机和欧姆龙CP1H串口通信打印

    欧姆龙CP1HPLC和斑马打印机通信 1. PLC 1.1PLC型号 CP1H 1.2通信方式 232通信,使用232扩展卡槽CP1W-CIF01. CP1W-CIF01是RS232选件板,通信距离最 ...