UniApp开发安卓以及H5实现页面级权限管理,避免用户浏览器直接输入url访问页面_uniapp 避免用户浏览器直接输入url访问页面
赞
踩
前言:uni-app如何像vue-router中的beforeEach一样实现跳转拦截功能呢？
为此uniapp官方提供了专门的API方法 uni.addInterceptor
页面级权限管理
举个栗子
我们发现底部有四个菜单分别是：首页、分类、购物车、我的；按常理来说首页和分类是不需要登陆就能查看的。另外两个则需要先登陆才能查看没登录就默认跳转到登录页面。
实现思路:
步骤一:在根目录新建文件夹 utils>Storage.js (文件夹名字可随意)
步骤二:封装本地存储方法函数(直接复制即可 亲测有效)
//存储 key:键 data:值
export const setStorage = (key, data) => {
return uni.setStorageSync(key,data,);
};
//获取
export const getStorage = (key) => {
return uni.getStorageSync(key);
};
//删除
export const delStorage = (key) => {
return uni.removeStorageSync(key);
};
步骤三:新建文件夹 router>index.js (这里文件名随意也可以放在utils里面)
步骤四:页面权限设置(建议复制到编辑器冲查看更加直观,亲测直接复制即可)
//引入本地存储工具函数
import { getStorage, setStorage } from "../src/utils/Storage";
//引入 toast模态框提示 我这边就不提供了 没有就默认注释掉
// import { toast } from "../src/utils/tools";
//黑名单 (未登录不允许访问的页面 有多少配置多少)
const whiteList = [
"/pages/mine/index",
"/pages/site/site",
"/pages/payment/payment",
"/pages/ordermsg/ordermsg",
"/pages/order/order",
];
//路由跳转的方法
const list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
//工具函数 用来判断前往的页面是否在黑名单中以及本地是否有token
/*
逻辑 我传入路径判断在黑名单中是否能找到 只要能找到或本地没有token那么返回fasle即将进行页面跳转
*/
function hasPermission(url) {
// 在白名单中或有token，直接跳转
if (whiteList.indexOf(url) !== -1 || getStorage("TOKEN")) {
return false;
}
return true;
}
/*
uni.addInterceptor 拦截器 第一个参数是触发的对象 第二个参数是配置项
利用循环监听所有的页面跳转方式
*/
list.forEach((item) => {
uni.addInterceptor(item, {
// 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
invoke(e) {
//坑 路径在黑名单和本地token不存在才能进行跳转不然就会死循环
if (!hasPermission(e.url) && !getStorage("TOKEN")) {
// 将用户的目标路径保存下来
// 这样可以实现 用户登录之后，直接跳转到目标页面
setStorage("URL", e.url);
//下面就可以写自己的逻辑了
console.log('此页面是权限页面,你还没登录,即将跳转到登录页面');
// toast(
// {
// title: "未登录,即将跳转登录页面",
// endtime: 2000,
// },
// {
// tab: 2,
// url: "/pages/login/login",
// }
// );
return false;
}
return true;
},
});
});
步骤五:最后在mian.js里面引入(这样就完成了)
避免用户浏览器直接输入url访问页面
在我们开发H5中避免用户直接在浏览器访问url来访问未授权页面
实现思路很简单
步骤一:看上面页面级权限管理教程重复步骤一和二操作(就是封装本地存储方法我这边就不重复操作了)
步骤二:进入到App.vue页面
步骤三:在onLaunch钩子中编写代码(总体来说和页面权限差不多,建议直接复制到编辑器查看更加直观 亲测有效 复制直接可以使用)
<script>
//引入步骤一封装好的工具函数
import { getStorage } from "./src/utils/Storage";
export default {
onLaunch: function () {
// 实现#ifndef APP-PLUS 来判断非app环境下才加载如下代码 因为App没有window对象 会报错
/* #ifndef APP-PLUS */
window.onhashchange = function () {
//监听浏览器的hash值变化
var newHash = window.location.hash; //获取hash值
//黑名单 (未登录不允许访问的页面 有多少配置多少)
//路由跳转的方法
const whiteList = [
"/pages/mine/index",
"/pages/site/site",
"/pages/payment/payment",
"/pages/ordermsg/ordermsg",
"/pages/order/order",
];
//工具函数 用来判断前往的页面是否在黑名单中以及本地是否有token
/*
逻辑 我传入路径判断在黑名单中是否能找到 只要能找到或本地没有token那么返回fasle即将进行页面跳转
*/
function hasPermission(url) {
// 在白名单中或有token，直接跳转
if (whiteList.indexOf(url) !== -1||getStorage("TOKEN")) {
return false;
}
return true;
}
//如果是黑名单且没有登录就直接跳转到登录页面
if (hasPermission(newHash)) {
uni.navigateTo({
url: "/pages/login/login",
});
return;
}
console.log("非权限页面");
};
/* #endif */
},
};
</script>
<style lang="scss">
@import "uview-plus/index.scss";
/* #ifdef H5 */
::v-deep .uni-tabbar {
.uni-tabbar-border {
background-color: #ffffff !important; // tabBar 上边框的颜色
}
}
/* #endif */
</style>
[详细] -->赞
踩
