实现原理: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. LeetCode 209. 长度最小的子数组(Minimum Size Subarray Sum)

    题目描述 给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的连续子数组.如果不存在符合条件的连续子数组,返回 0. 示例: 输入: s = 7, nums ...

  2. Cesium入门-1-展示一个地球

    Cesium 官网教程地址 https://cesium.com/docs/tutorials/getting-started//tutorials/getting-started/ 第一个程序代码: ...

  3. maven报错解决

    maven-resources-plugin prior to 2.4 is not supported by m2e. Use maven-  resources-plugin versio < ...

  4. ubuntu系统调整时区和时间

    date: 2019-05-30  10:14:23 author:headsen  chen 个人原创博客,转录需要注明作者和出处. 1,安装ntpdate,同步标准时间 root@hk-confl ...

  5. Oracle中查询当前时间、时间格式化方法

    Oracle中如何获取系统当前时间 select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from dual;  ORACLE里获取一个时间的年.季.月.周. ...

  6. Apache配置优化之开启KeepAlive

    在HTTP 1.0中和Apache服务器的一次连接只能发出一次HTTP请求,而KeepAlive参数支持HTTP 1.1版本的一次连接,多次传输功能,这样就可以在一次连接中发出多个HTTP请求.从而避 ...

  7. Spring Cloud(7.2):配置Producer Server

    我们首先创建一个生产者服务.这里以一个商品价格服务为例,这个微服务可以对商品-价格信息进行增删改查,当有商品-价格信息被更新或删除,则该微服务发送消息,告诉其他调用它的系统这条信息已经被修改. 配置p ...

  8. c# 结构体struct注意事项

    c# 结构struct注意事项 1,不能定义无参构造函数,因为隐式的默认无参构造函数不能被重写 2,当为某个结构编写带有参数的构造函数时,必须显式初始化所有成员,否则编译不过. 3,不允许在结构的实例 ...

  9. iOS-UITextField和UITextView隐藏键盘

    UITextField和UITextView隐藏键盘 71 views, IOS DEV, by admin. self._textField.returnKeyType=UIReturnKeyDon ...

  10. WordPress主题制作:基础样式文件

    1.style.css文件,其中必须包含 /* Theme Name:主题名称 Theme URI: 主题链接 Version: 版本 Description: 主题简介 Author: 主题作者 A ...