uni-app项目路由拦截及权限实践
# 拦截权限功能屏蔽
# 第一次获取数据
this.$store.dispatch('user/SET_MENU_LIST_TREE')
mutations: {
[SET_USERINFO]: (state: UserState) => {
const userInfo = uni.getStorageSync(LOCAL_STORAGE.USER_INFO);
state.userInfo = userInfo;
},
[SET_USER_REGION]: (state: UserState, payload: any) => {
state.userRegion = payload;
},
[SET_MENU_LIST_TREE](state: UserState, payload: any) {
state.menuTree = payload
state.menuList = menuTreeToList(payload)
}
},
actions: {
SET_USER_REGION: (context: ActionContext<UserState, RootState>) => {
const userInfo = context.state.userInfo
const addvcd = userInfo?.addvcd;
getRegionList2({
addvcd: addvcd,
}).then((res: BaseRes<any>) => {
if (res.code === 0) {
uni.setStorageSync(LOCAL_STORAGE.USER_REGION, res.data);// 每次重新登录都会覆盖,没有必要去移除它
context.commit(SET_USER_REGION, res.data)
}
});
},
SET_MENU_LIST_TREE: (context: ActionContext<UserState, RootState>, payload: any) => {
menuSelectListTree({}).then((res: BaseRes<any>) => {
if (res.code === 0) {
uni.setStorageSync(LOCAL_STORAGE.MENU_LIST_TREE, res.data);
context.commit(SET_MENU_LIST_TREE, res.data)
}
});
},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 拦截获取权限
router.beforeEach((to, from, next) => {
console.log('--beforeEach跳转开始--111--',to.path,from.path)
showLoading('页面加载中')
let menuList = store.state?.user?.menuList
if (isEmpty(menuList)) menuList = menuListTree
if (!isEmpty(menuList)) {
//@ts-ignore hasRoute 先不处理
const hasRoute = findRoute(menuList, to) || to.meta?.forceShow
console.log('---beforeEach----hasRoute---',hasRoute);
}
next();
});
router.afterEach((to, from, ) => {
console.log('--afterEachh跳转结束--222--',to.path,from.path)
hideLoading()
})
export function findRoute(menusN: any, curRoute: any) {
let hasRoute = false
const findRoutesByMenus = (menus: string | any[]) => {
for (let i = 0; i < menus.length; i++) {
const item = menus[i]
// console.log("---findRoute----item------", i,item.route, item.path);
// console.log("---findRoute----curRoute------",i,curRoute.name, curRoute.path);
if (hasRoute) {
hasRoute = true
return true
}else{
uni.removeStorageSync(LOCAL_STORAGE.PAGE_FUNC_BTN)
}
if ((curRoute.name && curRoute.name === item.route) || curRoute.path === item.path ) {
curRoute.meta.parentId = item.parentId
if (item.type === 2 && item.childrens) {
const pageFuncAndBtn = item.childrens.map((item2: { route: any; }) => item2.route)
// console.log("---findRoute----pageFuncAndBtn------",pageFuncAndBtn);
uni.setStorageSync(LOCAL_STORAGE.PAGE_FUNC_BTN, pageFuncAndBtn)
hasRoute = true
return true
}
}
// 直处理一层数据
// if (item.childrens && item.childrens.length) {
// hasRoute = findRoutesByMenus(item.childrens)
// }
}
return hasRoute
}
return findRoutesByMenus(menusN)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# 功能判断使用
列表动态使用
<view class="nav-box d-flex a-center j-center uni-flex-wrap">
<view v-for="item in menuListF" class="nav-item" :key="item.type" :style="{'width': menuListF.length >= 5? '20%': 100/menuListF.length + '%'}" @click="navClick(item.type, item.dataType, item.url)" >
<view class="d-flex flex-column a-center ">
<!-- <img class="image" mode="widthFix" :src="item.icon"/> -->
<img class="img" :src="item.icon"/>
<span class="mt-2 font-26 fw-bold">{{item.name}}</span>
</view>
</view>
</view>
computed: {
// menuListF(){return this.menuList.filter(item => this.$perms(item.type))},
menuListF(){return this.menuList.filter(item => {
if (item.type === 'videoSurveillance' && isApp) {
return false
}else{
return this.$perms(item.type)
}
})},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
固定使用
<view class="add" @click="addShow = true" v-if="$perms('addBtn')">
<image class="img" mode="widthFix" src="/static/image/fileadd.png" alt="success"></image>
</view>
1
2
3
2
3
# 返回特殊处理
# 多次点击退出
const router = createRouter({
// @ts-ignore
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES],
routerErrorEach: ({type,level,...args}) => {
console.log('---routerErrorEach---',type,level, args);
if(type===3){
router.$lockStatus=false;
if(isApp && level==1&&args.uniActualData.from==='backbutton') runtimeQuit()
}
else if(type===0){
router.$lockStatus=false;
}
},
// detectBeforeLock: (router2, to, navType) => {
// console.log("----detectBeforeLock---to---",to,navType);
// router2.$lockStatus=false;
// },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 返回处理
beforeRouteLeave(to, from, next) {
console.log("------beforeRouteLeave----00000----", this.patrolReady, JSON.stringify(to));
console.log("------beforeRouteLeave----00000----",to,from);
//1.如果是在上传到场打卡图片或者隐患图片时点击则返回巡查页
// backbutton 移动端才有；可以考虑去掉判断；
// if (to.BACKTYPE === 'backbutton' && (to.name === 'reservoir' || to.name === 'reservoirList' || to.name === 'reservoirDetail' || to.name === 'preFloodInspect')) {
if ((to.name === 'reservoir' || to.name === 'reservoirList' || to.name === 'reservoirDetail' || to.name === 'preFloodInspect')) {
if(this.patrolReady === 2 || this.patrolReady === 3) {
console.log("---------beforeRouteLeave----------1111------------",this.patrolReady);
this.patrolReady = 1
// next()
// return true
}
var xcData = uni.getStorageSync("xcData");//巡查数据里的对象
if(xcData) {
var obj = xcData[this.resCode+'-'+this.dataType];
if(obj?.state == 'stop' ) {
// return
console.log("---------beforeRouteLeave----------2222------------", xcData);
next(false);
}
}
uni.showModal({
title: "确定退出巡查？",
content: "此操作将退出巡查，退出后可能会造成巡查数据丢失，请谨慎操作！",
success: (res) => {
if (res.confirm) {
// 原路返回，不做跳转处理；
// const preFomePage = uni.getStorageSync('preFomePage')
// console.log("-----preFomePage----",preFomePage);
// switch (preFomePage) {
// case 'skPageTab':
// uni.switchTab({url:'/pages/reservoir/index'});
// break;
// case 'skPage':
// uni.redirectTo({url:'/pagesubs/reservoir/reservoirList'});
// break;
// case 'skDtl':
// console.log("------navigateBack----skDtl----");
// uni.redirectTo({url:`/pagesubs/reservoir/reservoirDetail?data=${this.resCode}`});
// break;
// case 'checkPage':
// uni.redirectTo({url:'/pagesubs/reservoirPatrol/preFloodInspect'});
// break;
// default:
// uni.navigateBack()
// break;
// }
console.log("------navigateBack----return----");
next()
}else{
next(false)
}
}
})
}else{
next()
}
},
// 点击左上角返回按钮
// onBackPress(options) {
// console.log("--------onBackPress---------",options);
// // // 此方法返回 true 后，uni-simple-router 会锁住路由不让跳转，这里需要异步解锁，下次才能跳转
// //1.如果是在上传到场打卡图片或者隐患图片时点击则返回巡查页
// if(this.patrolReady === 2 || this.patrolReady === 3) {
// this.patrolReady = 1
// return true
// }
// var xcData = uni.getStorageSync("xcData");//巡查数据里的对象
// if(xcData) {
// var obj = xcData[this.resCode+'-'+this.dataType];
// if(obj?.state == 'stop' ) {
// return false
// }
// }
// uni.showModal({
// title: "确定退出巡查？",
// content: "此操作将退出巡查，退出后可能会造成巡查数据丢失，请谨慎操作！",
// success: (res) => {
// if (res.confirm) {
// const preFomePage = uni.getStorageSync('preFomePage')
// console.log("-----preFomePage----",preFomePage);
// switch (preFomePage) {
// case 'skPageTab':
// uni.switchTab({url:'/pages/reservoir/index'});
// break;
// case 'skPage':
// uni.redirectTo({url:'/pagesubs/reservoir/reservoirList'});
// break;
// case 'skDtl':
// uni.redirectTo({url:'/pagesubs/reservoir/reservoirDetail'});
// break;
// case 'checkPage':
// uni.redirectTo({url:'/pagesubs/reservoirPatrol/preFloodInspect'});
// break;
// default:
// uni.navigateBack()
// break;
// }
// return true
// } else {
// return true
// }
// // setTimeout(() => this.$Router.$lockStatus = false, 500)
// }
// })
// // setTimeout(() => this.$Router.$lockStatus = false, 500)
// // return returnValue
// },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# 注意事项
# 跳转方法，要加延时处理
/**
* redirectTo跳转页面 关闭当前页面，跳转到应用内的某个页面。
* @param {*} urlOrObj 地址
* @param {*} data 数据，url或者对象
* @param {*} isCheck 检查是否为空
* redirectTo app情况下一定要延时处理
*/
export function redirectTo(urlOrObj: any, data?: any, isCheck=true, timeOut=500){
const urlNew = checkUrlAndPram(urlOrObj, data, isCheck)
if (urlNew){
if (isApp) {
setTimeout(() => uni.redirectTo({url:urlNew}), timeOut);
} else {
uni.redirectTo({url:urlNew})
}
}else{
showToast('路径为空,请检查路径url!')
}
}
/**
* reLaunch跳转页面 关闭所有页面，打开到应用内的某个页面。
* @param {*} urlOrObj 地址
* @param {*} data 数据，url或者对象
* @param {*} isCheck 检查是否为空
* reLaunch app情况下一定要延时处理
*/
export function reLaunch(urlOrObj: any, data?: any, isCheck=true, timeOut=500){
const urlNew = checkUrlAndPram(urlOrObj, data, isCheck)
console.log("---reLaunch----urlNew----",urlNew);
if (urlNew) {
if (isApp) {
setTimeout(() => uni.reLaunch({url:urlNew}), timeOut);
} else {
uni.reLaunch({url:urlNew})
}
}else{
showToast('路径为空,请检查路径url!')
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#
上次更新: 2023/11/17, 05:08:20