如何在vue中实现路由跳转判断用户权限功能

实现这类校验有几个步骤。

1、设置路由是否需要校验的阀值。

// 路由配置的地方谁知阀值

routes:[

{

name:'admin',

path:'/admin',

component:',

meta:{

auth: true // 这里设置，当前路由需要校验

}

}

]

2、设置保存登陆态信息。

// storejs

import Vue from 'vue'

import Vuex from 'vuex'

Vueuse(Vuex)

let modules = {

// 自己的模块代码 其它代码就不写了。。同vuex模块

state:{ authorizd:true },

getters:{

authorizd: state => stateauthorizd

},

actions: {

login({commit},payload){

// ajax 登陆流程，

commit("login", 登陆信息)

}

},

mutations:{

login(state,loginInfo){

stateauthorizd = loginInfo // 假定登陆成功后，设置 state

}

}

}

export default new VuexStore({

modules: modules

})

3、路由跳转，校验

// 路由入口钩子函数

import store from 'store'

routerbeforeEach((to,from,next) => {

if(tomatchedsome( m => mmetaauth)){

// 对路由进行验证

if(storegettersauthorizd) { // 已经登陆

next()

}else{

// 未登录,跳转到登陆页面，并且带上 将要去的地址，方便登陆后跳转。

next({path:'/login',query:{ referrer: tofullPath} })

}

}else{

next()

}

})

上面代码是伪代码，主要是讲思路。。不要按部就班。。重在理解。

最近在重温vue全家桶，再看一遍感觉记忆更深刻，所以专门记录一下（本文vuex版本为v3x）。

Vuex是专为Vuejs开发的状态管理模式。它采用集中式存储，管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（我的理解就是全局变量）。

state

对象类型，类似于实例的 data属性，存放数据

getters

对象类型，类似于实例的计算属性 computed

mutations

对象类型，类似于实例的 methods，但是不能处理异步方法

actions

对象类型，类似于实例的 methods，可以处理异步方法

modules

对象类型，当state内容比较多时，通过该属性分割成小模块，每个模块都拥有自己的 state、mutation、action、getter

存储在 state 中的数据和 Vue 实例中的 data 遵循相同的规则，必须是纯粹的对象。

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，并且默认接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数（如下例）

通过调用 this$storecommit('xxx') ，调用 mutation 中的方法，更改 store 中的值

新建文件 mutation-typesjs ，定义方法名的常量，并导出

在store中

在组件中

注意， Action 提交的是 mutation ，而不是直接变更状态，并且可以包含任意异步 *** 作

或者

Action 接受一个与 store 实例具有相同方法和属性的 context 参数对象，因此你可以调用 contextcommit 提交一个 mutation ，或者通过 contextstate 和 contextgetters 来获取 state 和 getters ，利用 ES6 的解构，可以简化写法。

在vuex中

在组件中使用 async / await 或者 then / catch 处理异步

当应用变得非常复杂时， store 对象就可能变得相当臃肿。这时候可以将 store 分割成模块，每个模块拥有自己的 state 、 mutation 、 action 、 getter 、甚至是嵌套子模块，从上至下进行同样方式的分割。

在store目录下新建 Modules 文件夹，在 Modules 文件夹中新建 modulesAjs ， modulesBjs ，如下图

在modulesAjs中写上局部模块的 state 、 mutation 、 action 、 getter ，并导出

然后在 store 的 indexjs 中引入，并丢进 modules 对象里

在组件中直接使用

在组件中使用 mapState 映射

在组件中直接使用

在组件中使用 mapState 映射

模块内部的 getter ，接受的参数 state 和 getters 是模块的局部状态对象，而根节点的状态会作为第三个参数 rootState 暴露出来

如果需要带参数

在组件中直接使用

在组件中使用 mapMutations 映射

模块内部的 mutations ，默认接受的第一个参数 state 是模块的局部状态对象

如果需要带参数

在组件中直接使用

在组件中使用 mapActions 映射

或者重命名

对于模块内部的 action ，局部状态通过 contextstate 暴露出来，根节点状态则为 contextrootState

默认情况下，模块内部的 action 、 mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望模块具有更高的封装度和复用性，可以通过给模块添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter 、 action 及 mutation 都会自动根据模块注册的路径调整命名。

先在模块 moduleBjs 中添加 namespaced: true

在 store 的 indexjs 中

如果在组件中使用命名空间，需要带上空间名称， mapState , mapGetters , mapMutations ， mapActions 用法一样。

如果你希望使用全局的 state 和 getter ， rootState 和 rootGetters 会作为第三和第四参数传入 getter ，也会通过 context 对象的属性传入 action 。若需要在全局命名空间内分发 action 或提交 mutation ，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可

在带命名空间的模块注册全局 action ，需要添加 root: true ，并将这个 action 的定义放在函数 handler 中，其中，handler的第一个参数 namespacedContext 就是 action 中的 Context 参数

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

在组件直接使用

总结

~

~

~

非组件中获取通过this$store数据名

~

~

vuex使用方式：

方式1

1、 创建容器实例store

2 、容器的状态state里写数据(驱动视图更新的数据)

3、 computed如同 methods，用来 修改 state数据状态的

1、mapState 辅助函数

正确做法：通过mutation修改数据状态

注意-注意-注意：mutation 中不能只能修改 state里的数据

如果需要执行异步 *** 作修改 state状态，则：使用 action

1、 在 action 中做两件事儿：1 执行异步 2 提交mutation修改容器状态

2、 注意：不要在 action 中直接修改容器状态，无法被调试工具观测记录到

3、 因为调试工具只能记录 mutation 的历史改变

1、filter过滤，过滤这个计算属性的数据

步骤：

1、安装、搭建脚手架

线上创建一个仓库(空的)

git status 查看状态

git remote add origin 复制地址

git push -u origin li

1、删除app

- Appvue 、定义出口#app、写路由出口、样式设置局部样式 完成

2、新建router文件、复制 完成

3、新建store文件、复制 完成

4、views两个vue组件删除 完成

5、新建文件、、、dir 、fileter、样式、utils、创建\ 看 文档结果

6、重启服务看下有没有报错(页面)、提交git--调整目录结构

6、vant(杭州有赞开发的)--导入vant

前端权限控制分为四个方面的控制

第一点界面控制：用户还未登入就能通过url访问到系统页面，该问题比较好解决通过路由守卫即可判断。

如果用户登入以后用url访问不是属于自己的菜单页，如我没有系统管理这个界面，我去地址栏输入系统管理这个页面的url，前端因该阻止它访问页面。输入url能访问到页面的原因是你的路由配置了这个地址，所以控制界面的方式就是从路由入手，前期我们配置大家都有的路由，其他的路由根据登入系统时后台返回的权限列表数据，动态添加路由。

在登入时我们把权限数据存入vuex中并本地化，通过路由对象可以获取到路由的配置，把那个用户的路由单独添加到路由列表中，使用addroutes添加更改后到路由配置，添加动态路由的方法调用在appvue的created中，因为每次加载页面都会调用该方法。

第二菜单控制:

根据用户的不同菜单栏也不同，该问题跟动态路由类似登入时拿到数据存入vuex中并本地化，之后在菜单组件列表循环遍历出对应的菜单栏，过于简单就不截图了。

第三按钮控制：

这个控制可以采用自定义组件的方式，例如这个用户没有添加人员的按钮，他只有查看这个人员菜单的权限。在页面上按钮都添加上，但是是否能显示则根据后端传过来的权限数据，该数据在动态路由作为meta数据添加在路由上了，也就是用路由的meta的数据去判断这个按钮是否显示或者禁用或是可用，在页面我们添加按钮我们就加一个action属于为add，我们或者add去比较如果没有add这个权限如果处理。上图

第四请求拦截

请求拦截并不简单的做一个token，而是每个用户对应可以 *** 作的请求放行，不是他可以 *** 作的拦截，如他没有添加的请求则要拦截，前面不是做了按钮的控制吗，为啥还要做这个拦截，按钮控制并不安全，其实他可以通过浏览器直接修改按钮的属性，有人又说有token了不是可以拦截了吗，对，可以拦截不过那时后台拦截，你请求还是发过去了，请求影响系统性能，所以做这个还是有必要的。

请求拦截，根据名字就知道他是在请求拦截器里设置的，在拦截器中可以获取请求方式，根据请求方式与路由中的mate权限对比有就发送请求，如果没有则不发请求

目前在使用VUE3X开发，发现加载动态路由的话，由于刷新页面就会重新加载VUEX，故会丢失已存在的state，但是又不想localStorage，sessionStorage。

经过多次试验，采取在权限验证里面的路由守卫里，添加

检测如果存在路由则跳转下一步，不存在则再次进入获取用户信息和路由的判断

if (storegetterspermission_routeslength > 0) {

//加载路由

next();

//routeroptionsroutes = storestatepermissionroutes

} else {

以上就是关于如何在vue中实现路由跳转判断用户权限功能全部的内容，包括:如何在vue中实现路由跳转判断用户权限功能、超详细！Vuex手把手教程、vuex组件通信等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！