介绍
<李> 实现
1。初始化
import Vue 得到& # 39;vue # 39;
import Router 得到& # 39;vue-router& # 39;
import store 得到& # 39;@/商店# 39;
Vue.use(路由器)
const router =, new 路由器()//,全局前置守卫
router.beforeEach (, async (下),,,,,=祝辞,{
,let userRoutes =, store.state.global.userRoutes //userRoutes 当前用户拥有的权限
,if (userRoutes.length ,,, ! userRoutes.filter (item =祝辞,item.path ==, to.path) . length), {
下才能(from.path)
,返回
,}
下(),
}）
export default 路由器 //state.js
export default {
,//全部路由
,allRoutes: [//才能登录页面
{才能
,,,路径:& # 39;/演示# 39;
,,,的名字:& # 39;演示# 39;
,,,组件:(),=祝辞,进口(& # 39;@/视图/演示# 39;)
,,},
{才能
,,,路径:& # 39;* & # 39;
,,,重定向:& # 39;/演示# 39;
,,},//主才能页面
{才能
,,,路径:& # 39;/& # 39;
,,组件:,(),=祝辞,进口(& # 39;@/视图# 39;),
,,},
{才能
,,,路径:& # 39;/回家# 39;
,,,的名字:& # 39;回家# 39;
,,组件:,(),=祝辞,进口(& # 39;@/视图/回家# 39;)
,,}
,),
,//用户匹配的路由,要用addRoutes添加到路线
,userRoutes: [],
,//渲染用户菜单
,userMenus: []
} 数据返回时格式
menu =, (
,{,,1,,名字:,& # 39;首页& # 39;,,路径:,& # 39;/回家# 39;,,parentId:, 0},
,{,,2,,名字:,& # 39;系统设置& # 39;,,路径:,& # 39;& # 39;,,parentId:, 0},
,{,,3,,名字:,& # 39;角色配置& # 39;,,路径:,& # 39;/角色# 39;,,parentId:, 2},
,{,,4,的名字:,& # 39;用户配置& # 39;,,路径:,& # 39;/用户# 39;,,parentId:, 2}
]
需要处理成
menu =, (
,{,,1,,名字:,& # 39;首页& # 39;,,路径:,& # 39;/回家# 39;,,parentId:, 0},
,{,,2,,名字:,& # 39;系统设置& # 39;,,路径:,& # 39;& # 39;,,parentId:, 0,,
,,,孩子:[
,,,,{,,3,,名字:,& # 39;角色配置& # 39;,,路径:,& # 39;/角色# 39;,,parentId:, 2},
,,,,{,,4,的名字:,& # 39;用户配置& # 39;,,路径:,& # 39;/用户# 39;,,parentId:, 2}
,,,)
,,},
) //actions.js//,获取当前用户权限
,getMenu: async ({,状态,提交,dispatch }),=祝辞,{//请才能求当前用户所拥有的权限
let 才能;result =, await axios (& # 39;/api/菜单/找到# 39;)
if 才能;(result.data.code 祝辞,0),{
,,let userRoutes =result.data.result
,,userRoutes.forEach (item =祝辞,{
,,,item.child =, []
,,,state.allRoutes.forEach (res =祝辞,{
,,,,if (item.path ==, res.path), {
,,,,,item.component =res.component
,,,,}
,,,})
,,})
,,let oneArr =, [],, anotherArr =, [],,//oneArr 一级路由,anotherArr 其他级别路由
,,oneArr =, userRoutes.filter(=祝辞item ! item.parentId)
,,anotherArr =, userRoutes.filter (item =祝辞,item.parentId)
,,anotherArr.forEach (item =祝辞,{
,,,oneArr.forEach (obj =祝辞,{
,,,,if (item.parentId ==, obj.id),{,//如果匹配,说明找到父级,直接推到父级的孩子里面
,,,,,if (! obj.child.filter (k =祝辞,k.id ==, item.id) . length), {
,,,,,,obj.child.push(项)
,,,,,}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关利用Vue怎么实现一个前端权限控制功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
除登录接口,退出接口外,其余接口增加牌验证。
<李>打开页面时请求获取菜单接口,请求不成功说明未登录,给路线默认添加登录页面以及*重定向。
<李>登录成功后获取到令牌,把令牌存入会话以及请求头。
<李>登录成功后获取菜单接口,请求回来的路由和vuex里面全部的路由进行匹配,获取组件。
<李>把获取完组件的路由格式化,找自己的parentId,如果找到的话插入到该元素的孩子里面。
思路大致就是这样,有听得模糊的也不要紧,跟随我的步伐看看代码是怎样写的你就明白了~
实现
1。初始化
路线。js
大家可以看到的路线。js里没有路由,因为路由都是动态添加进去的,只有一个全局守卫,作用是当登陆成功后,用户地址栏手动输入地址,判断路由是否正确,如果正确就让他跳转。
vuex
状态中需要定义全部的路由,这个用来跟后台请求到的权限进行匹配,并且获取组件组件。
操作。js里面是主要的逻辑,其中getMenu方法是本文的核心
所以在下方需要用到递归来处理↓
