实现原理: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. Windows服务器下,Tomcat制作成服务自启动,跑不起来,报内存溢出。

    测试过不行 使用服务启动后,tomcat运行时会抛出各种内存溢出错误,于是我第一时间想到的是去修改catalina.bat文件中的内存设置,但是然并卵,于是我又尝试不用服务,去使用startup.ba ...

  2. 数据库连接池Flask-SQLAlchemy中多线程安全的问题

    使用flask-sqlalchemy写代码码到一半,突然想到,Session是否是线程安全的?于是上官方文档,答案是否! 那问题来了,怎么破?因为它会牵涉到多线程情况下,调用rollback导致的不可 ...

  3. 【416】Ubuntu 配置

    修改桌面主题:How to Install Desktop Themes on Ubuntu 18.04 LTS 命令行显示短路径:怎样ubuntu下命令行终端显示短路径 gedit 扩展插件:Use ...

  4. Django之model补充:一对多、跨表操作

    表结构概述 model.py : class Something(models.Model): name = models.CharField(max_length=32) class UserTyp ...

  5. C#子线程执行完后通知主线程(转)

    其实这个比较简单,子线程怎么通知主线程,就是让子线程做完了自己的事儿就去干主线程的转回去干主线程的事儿.  那么怎么让子线程去做主线程的事儿呢,我们只需要把主线程的方法传递给子线程就行了,那么传递方法 ...

  6. 【Leetcode_easy】812. Largest Triangle Area

    problem 812. Largest Triangle Area solution: class Solution { public: double largestTriangleArea(vec ...

  7. tomcat 是如何做到不同webapp 类隔离的

    这个问题的核心是classloader 上图中 启动类加载器,扩展类加载器,应用程序类加载器是 jvm 自带的类加载器. comm  catalina  shared webapp 是tomcat 扩 ...

  8. nice-validator表单验证插件

    nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端 ...

  9. 如何抓住ECS的命门,让我们的学习事半功倍

    导读 这是一篇老文写与2019年5月 我们说如何提高我们的学习效率,有人说一本书一般只会讲一个知识点,那我们学习ECS 如何抓住学习的重点,提高学习效率.经过本人一段时间的学习总结,总于找到了一个便捷 ...

  10. linux centos7 开启 mysql 3306 端口 外网访问 的实践

    第〇步:思路 3306 端口能否被外网访问,主要要考虑: (1)mysql的3306 端口是否开启?是否没有更改端口号? (2)mysql 是否允许3306 被外网访问? (3)linux 是否已经开 ...