如何在vue-router的beforeEach钩子里做页面访问权限验证

一般前端做的话放到sessionStorage里面，通过vuex去管理，直接上代码吧(我项目里'/'是登录页，'/Table'是登录后的首页)

// main.js
router.beforeEach((to, from, next) => {if (to.path === '/' && sessionStorage.getItem('accessToken') && from.path !== '/Table'){sessionStorage.removeItem('accessToken')next()}else if (to.meta.requiresAuth && !sessionStorage.getItem('accessToken')){next({path: '/',query: {redirect: to.fullPath}})}else if (from.path === '/Table' && to.path === '/'){next({path: '/Table'})}else{next()}
})

下面是登录页

  login (){var _this = this;let params = {}params = {username: this.username,password: this.password}api.login_in(params).then(data => {if (data) {this.$store.commit(types.LOGIN_IN, data)this.$router.push(this.$route.query.redirect || '/Table');Toast({message: '登录成功',iconClass: 'icon-success',})}})     }

然后是store.js

const state = {accessToken: null
}const mutations = {[types.LOGIN_IN] (state, data) {state.accessToken = datasessionStorage.setItem('accessToken', JSON.stringify(data.name))},[types.LOGIN_OUT] (state, data) {state.accessToken = null}
}

如何在vue-router的beforeEach钩子里做页面访问权限验证相关推荐

vue——router更改路由地址，但是页面不能跳转
在做电商项目时,筛选标签时,需要路由发生变化,但是当前的页面商品列表还需要局部刷新. 如果更改路由后,页面跳转,则是全局刷新,局部刷新才能够满足用户需求. 则此时要做的就是:更改路由地址,但是页面不能 ...
前端学习（1871）vue之电商管理系统电商系统之路由导航守卫控制页面访问权限
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
再谈C#里4个访问权限修饰符
想必大家对这个四个修饰符都已经很了解了,但是我在这里还是要说,是为什么呢?因为每个人对它的理解不一样,我写出来对自己是个温故而知新,对大家是个分享,希望有什么不对的或需要谈论的地方大家指出来. C#里 ...
Vue:router的beforeEach是什么
来自:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局守卫正如其名,vue-router 提供的导航守卫主要用 ...
前端学习（3041）：vue+element今日头条管理-控制用户的访问权限
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
vue.js基础学习（Vue Router安装与使用）
基础入门:vue.js Vue Router安装与使用 1.Vue Router安装在cmd窗口运行命令:npm install vue-router@4,安装Vue Router: 2. Vue ...
Vue router 模式 hash 和 history
目录 Vue router 基本使用 Vue-router 传参 hash 模式 Vue-router hash history 模式 Vue router 基本使用用 Vue + Vue Rout ...

如何在vue-router的beforeEach钩子里做页面访问权限验证

如何在vue-router的beforeEach钩子里做页面访问权限验证相关推荐

最新文章

热门文章