uniapp-权限拦截

正常我们的项目都会有权限控制，比如登录权限才能访问的页面

接下来我们就尝试一下这一部分

1、存储用户token

登录以后我们拿到token保存到本地，后面的登录用户信息和相关接口也是利用我们的token来进行

• 登录以后我们存储一下token，后面的接口请求都需要用到token，我们定义为token

uni.setStorageSync('token',res.token);

2、封装权限检查

☞ 在src => utils 目录中创建一个 auth.js 文件，封装判断用户是否已登录的逻辑：

/**
 * 判断用户是否登录
 * @returns {boolean} 返回登录状态
 */
export const checkLogin = () => {
  const token = uni.getStorageSync('user_token');
  if (token) {
    return true; // 已登录
  }
  return false; // 未登录
};

/**
 * 登录检查，未登录时弹出提示并跳转到登录页面
 * @param {Function} callback 如果已登录，执行 callback
 */
export const checkLoginAndRedirect = (callback) => {
  const isLoggedIn = checkLogin();
  if (isLoggedIn) {
    // 如果已登录，执行回调
    if (callback) callback();
  } else {
    // 如果未登录，弹出提示并跳转到登录页面
    uni.showModal({
      title: '提示',
      content: '您还未登录，请先登录！',
      success: (res) => {
        if (res.confirm) {
          // 用户点击了"确定"，跳转到登录页面
          uni.navigateTo({
            url: '/pages/login/login' // 根据你的项目调整登录页面路径
          });
        }
      }
    });
  }
};

3、使用权限检查

• 在登录的首页之中引入和检查用户登录状态

import {ref,onMounted} from "vue";

import { checkLoginAndRedirect } from '@/utils/auth.js';

onMounted(() => {
    checkLoginAndRedirect((res) => {
        console.log('核查登录状态结束！');
    });
});

4、获取登录人信息

在登录成功以后，我们利用token拿到登录人的用户ID

☞ 这部分也是放到我们的验证权限里面

if (isLoggedIn) {
	  console.log('用户已登录！');
	  // uni.getStorageSync('token');
	  request({
	  	url: '/getInfo', // 这里的 url 会自动加上 /api 前缀
	  	method: 'GET',
	  }).then((res) => {
	  	console.log('🚀 → res -> 请求成功:', res);
	  	if (res.code == 200) {
			uni.setStorageSync('userId', res.user.id);
			uni.showToast({
				title: res.message,
				duration: 2000
			});
	  	} else{
	  		uni.showModal({
	  			title: '提示',
	  			content: res.message,
	  			success: function(res) {
	  				if (res.confirm) {
						uni.removeStorageSync('userId');
						uni.showToast({
							title: res.message,
							duration: 2000
						});
						uni.reLaunch({
							url:'/pages/component/login/login'
						})
	  				} else if (res.cancel) {}
	  			}
	  		});
	  	}
	  }).catch((error) => {
	  	console.log('请求失败:', error);
	  });
    // 如果已登录，执行回调
    if (callback) callback();
  }

通过上面接口，我们就可以正确拿到用户的userId，然后存储到本地

本地直接调用我们拿到的Token信息

uni.getStorageSync('token')

5、千人千页

接下来我们就需要根据用户不同的权限去跳转不同的页面，达到每个人进来以后根据自己的权限看到不同的页面

👉 从接口之中获取我们权限

// 获取用户信息
const userInfo = uni.getStorageSync('userInfo');
// 获取用户权限
const userPermissions = userInfo.permissions;
// 根据用户权限跳转到不同的页面
if (userPermissions.includes('admin')) {
	uni.navigateTo({
		url: '/pages/admin/admin'
	});
} else if (userPermissions.includes('user')) {	
	uni.navigateTo({
		url: '/pages/user/user'
	});
} else {
	uni.navigateTo({
		url: '/pages/visitor/visitor'
	});
}

👉从本地缓存中获取用户权限

// 假设用户权限存储在本地缓存中
const userPermissions = uni.getStorageSync('userPermissions'); // 获取用户权限数据

// 判断用户权限并跳转到不同的页面
if (userPermissions.includes('admin')) {
    // 如果用户有 admin 权限，跳转到 admin 页面
    uni.navigateTo({
        url: '/pages/admin/admin' // 跳转到管理员页面
    });
} else if (userPermissions.includes('editor')) {
    // 如果用户有 editor 权限，跳转到 editor 页面
    uni.navigateTo({
        url: '/pages/editor/editor' // 跳转到编辑页面
    });
} else {
    // 如果用户没有 admin 或 editor 权限，跳转到默认页面
    uni.navigateTo({
        url: '/pages/default/default' // 跳转到默认页面
    });
}

👉封装简化权限判断和跳转

封装权限为函数可以封装为：

function checkPermissionsAndRedirect() {
    const userPermissions = uni.getStorageSync('userPermissions'); // 获取用户权限数据
    // 根据权限判断并跳转到不同页面
    if (userPermissions.includes('admin')) {
        uni.navigateTo({
            url: '/pages/admin/admin' // 跳转到管理员页面
        });
    } else if (userPermissions.includes('editor')) {
        uni.navigateTo({
            url: '/pages/editor/editor' // 跳转到编辑页面
        });
    } else {
        uni.navigateTo({
            url: '/pages/default/default' // 跳转到默认页面
        });
    }
}

// 在页面加载时调用权限检查和跳转函数
onLoad() {
    checkPermissionsAndRedirect(); // 调用权限检查并跳转
}

👉 权限更新

用户登录以后，用户的权限中途进行了更新，这就需要重新进行权限检查和跳转。我们采取的的方式是，登录缓存权限，页面检查权限，权限更新后，重新登录，更新缓存权限。

// 假设用户登录后返回的权限信息
const newPermissions = ['admin', 'editor']; // 这是从 API 获取到的权限

// 保存到本地缓存
uni.setStorageSync('userPermissions', newPermissions);

// 根据新的权限跳转页面
checkPermissionsAndRedirect();

👉权限不足拦截提示 用户权限不够的时候给个提示，跳转到权限不足页面

if (!userPermissions.includes('admin')) {
    uni.showToast({
        title: '权限不足',
        icon: 'none'
    });
    uni.navigateTo({
        url: '/pages/no-permission/no-permission' // 跳转到权限不足页面
    });
}