实现原理: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. Sentinel 快速入门

    Sentinel 简介 什么是 Sentinel? 『Sentinel』是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多 ...

  2. docker-compose EFK查看docker及容器的日志

    上一篇<docker-compose ELK+Filebeat查看docker及容器的日志>已经演示了如何在docker中使用docker-compose创建容器,并将docker中的所有 ...

  3. http-proxy-middleware及express实现反向代理

    $ npm install --save-dev http-proxy-middleware npm install express // 引用依赖 var express = require('ex ...

  4. python 使微信自动回复

    https://zhuanlan.zhihu.com/p/308999073 今天是鄙人的生日,欢luo过后想写点关于itchat的文章~ (不小心暴露年龄了,是的,我已经16岁了~~) 言归正传,这 ...

  5. SIT测试 和 UAT测试

    在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(Code Review)来保证软件符合客户需求且流程正确.下面简单介 ...

  6. 阶段5 3.微服务项目【学成在线】_day18 用户授权_16-细粒度授权-我的课程细粒度授权-测试

    重启课程管理服务 刷新页面,令牌到期需要先登陆 首先拿到company的id 测试2号公司

  7. 算法习题---4-4骰子涂色(UVa253)

    一:题目 分别对两个骰子的六个面涂色r-红 b-蓝 g-绿,通过转动骰子,看两个骰子是不是一样的涂色方法 (一)题目详解 题目规定了正方体的六个面的序号:从1-,按照这个需要提供涂色序列 (二)案例展 ...

  8. 关于做移动端ui自动化测试使用PC代理网络会出现的问题

    无论是手动操作app还是ui脚本操作app,只要你使用了代理网络,第一次请求的时长会耗时特别长,所以在移动端测试时尽量不要使用代理网络,减少不必要的麻烦

  9. Django之中间件、缓存以及信号

    Django之中间件 中间件执行流程 我们从浏览器发出一个请求 Request,得到一个响应后的内容 HttpResponse ,这个请求传递到 Django的过程如下: 也就是说,每一个请求都是先通 ...

  10. spark在windows的配置

    在spark-env.cmd添加一行 FOR /F %%i IN ('hadoop classpath') DO @set SPARK_DIST_CLASSPATH=%%i 修改:log4j.prop ...