移动端实现防止重复登录的一种方法(登录踢出)

公司有个项目要求有蛋疼的登录踢出功能,发现使用推送的话可以很容易的实现这个功能。

原理图如下



每台手机在用户登录成功的时候都将用户名和唯一设备识别码发送到服务器端,服务器端首先在数据库中检索账户,之后提取出来账户所绑定的唯一设备识别码,并进行比对,

如果不存在就储存起来,如果比对结果不一样的话就利用推送(之前用的推送号进行的设别唯一性识别),给账户之前的绑定的设备推送踢出消息,手机在接收到踢出的推送消息后如果处于退出状态则不进行处理,否则提示用户设备在其他地方登录,并强制退出。


源代码比较简单,前端就在推送消息监听那里处理下,服务器端在登录那里添加个校对和发送推送消息,使用效果还不错。





  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Uniapp开发一个移动端项目实现单点登录,可以采用类似的认证协议和库,如OAuth 2.0和uni-app的路由功能。下面是一个简单的示例代码,演示如何在Uniapp项目中实现单点登录。 首先,你需要在Uniapp项目中安装`uni-router`和`uni-request`: ```bash npm install uni-router uni-request ``` 然后,在你的Uniapp项目的main.js文件中添加以下代码: ```javascript import Vue from 'vue' import App from './App' // 引入路由库 import Router from 'uni-router' Vue.use(Router) // 引入请求库 import Request from 'uni-request' Vue.prototype.$http = Request // 创建路由实例 const router = new Router({ mode: 'history', routes: [ // 其他路由 { path: '/login', name: 'Login', component: () => import('./pages/Login.vue') }, // 其他路由 ] }) // 添加路由导航守卫 router.beforeEach((to, from, next) => { const isAuthenticated = uni.getStorageSync('accessToken') if (to.path !== '/login' && !isAuthenticated) { next('/login') } else { next() } }) // 挂载路由实例 Vue.prototype.$router = router Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App, }) app.$mount() ``` 在这段代码中,我们引入了 `uni-router` 和 `uni-request` 库,并创建了一个路由实例。我们定义了一些路由,其中 `/login` 是登录页面的路由路径。我们还添加了一个路由导航守卫,在每次路由跳转之前检查用户是否已经登录(通过检查本地存储中是否存在访问令牌 `accessToken`)。如果用户未登录且不是访问登录页面,则自动跳转到登录页面。 接下来,创建一个登录页面组件 `Login.vue`,并添加下面的代码: ```vue <template> <div> <h1>Login Page</h1> <button @click="login">Login</button> </div> </template> <script> export default { methods: { login() { // 调用认证服务器的登录接口获取访问令牌 // 例如使用 uni-request 发送请求 this.$http.post('https://auth-server.com/login', { username: 'your-username', password: 'your-password' }) .then(response => { const accessToken = response.data.accessToken // 将访问令牌保存到本地存储 uni.setStorageSync('accessToken', accessToken) // 跳转到首页或其他需要登录才能访问的页面 uni.navigateTo({ url: '/pages/Home.vue' }) }) .catch(error => { console.error(error) }) } } } </script> ``` 在这个示例中,我们通过点击登录按钮来触发登录流程。你需要根据你的认证服务器的实际情况,使用 `uni-request` 或其他HTTP库发送登录请求,并将返回的访问令牌保存到本地存储中。最后,使用 `uni.navigateTo` 跳转到首页或其他需要登录才能访问的页面。 请注意,这只是一个简单的示例,实际应用中可能还需要处理认证服务器返回的令牌验证和刷新等逻辑。 希望这个示例能帮助你在Uniapp移动端应用中实现单点登录
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值