实现原理: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. linux下 安装 ImageMagick 及其 php imagick扩展(转)

    linux下 安装 ImageMagick 及其 php imagick扩展 PHP版本7.1.3 : ImageMagick版本 ImageMagick-7.0.8-3: PHP扩展imagick版 ...

  2. php发现一个神奇的函数

    echo strtr('aaddffvvbbcc','avc','242'); //22ddff44bb22 echo '<br>'; echo str_replace('ad',22,' ...

  3. HBase-集群安装

    需要先启动 HDFS 集群和 ZooKeeper 集群. Hadoop 集群安装:https://www.cnblogs.com/jhxxb/p/10629796.html ZooKeeper 集群安 ...

  4. 为什么vue-cli创建的build文件下没有dev-server.js文件

    在新版本的Vue开发中,通过vue-cli创建的build文件夹下面已经没有了旧版本中的dev-server.js文件新版本的vue已将dev-server.js与webpack.dev.conf.j ...

  5. Android插件化技术——原理篇

    <Android插件化技术——原理篇>     转载:https://mp.weixin.qq.com/s/Uwr6Rimc7Gpnq4wMFZSAag?utm_source=androi ...

  6. ES6深入浅出-1 新版变量声明:let 和 const-3.视频 相关面试题

    执行顺序问题 请问console.log输出的值是多少 输出的肯定是1 假如这里有一行未知的代码 会打印出几? 如果这段未知的代码是a=2.那么其实console输出的就是2 只关心代码,没有关心代码 ...

  7. 汉化Git Gui

    先来一个图: 其实使用自带的图形化操作git还是很方便的,但是英文界面还是让相当一部分小伙伴不太舒服,比如我哈. 汉化包地址:链接: https://pan.baidu.com/s/1qQtBUsf1 ...

  8. CommMonitor10.0.3串口过滤工具(serial port monitor)

    CommMonitor  串行端口监视精灵是用于RS232 / RS422 / RS485端口监控的专业强大的系统实用程序软件.CommMonitor监视显示,记录和分析系统中的所有串行端口活动.这是 ...

  9. 利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图、折线图、饼图

    利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import  pandas  as pdimport  matplotlib. ...

  10. go基础系列 第一章 go基础语法

    0.前言 1. go定义变量的几种方式 2. go内建变量类型 3. 常量的定义 4. go枚举 5. go的if语句 零. go语言的换行 go语言对换行很有讲究, 如果想换行,必须有一个逗号, 否 ...