feat: 登陆拦截

Author: feige996

src/pages/demo/base/route.vue

@@ -60,6 +60,24 @@ const pageDemos = pagesJson.pages
     path: e.path,
   }))
 
+const routeInterceptionList = [
+  {
+    title: '说明页面',
+    path: 'pages/demo/route-interceptor/index',
+  },
+  {
+    title: '单独登录页面',
+    path: 'pages/demo/route-interceptor/login-page?name=feige&age=30',
+  },
+  {
+    title: '登录弹窗',
+    path: 'pages/demo/route-interceptor/login-model?name=feige&age=30',
+  },
+  {
+    title: '静默登录',
+    path: 'pages/demo/route-interceptor/login-auto?name=feige&age=30',
+  },
+]
 const tabList = reactive([
   {
     id: 1,
@@ -68,6 +86,11 @@ const tabList = reactive([
   },
   {
     id: 2,
+    title: '登录拦截',
+    list: routeInterceptionList,
+  },
+  {
+    id: 3,
     title: '页面功能',
     list: pageDemos,
   },

src/pages/demo/index.vue

@@ -0,0 +1,43 @@
+<route lang="json5" type="page">
+{
+  needLogin: true,
+  style: { navigationBarTitleText: '登陆拦截' },
+}
+</route>
+
+<template>
+  <view class="mt-8 text-center">
+    <view class="">登陆拦截的时候的登录有如下3种情况</view>
+    <view class="">1.登录动作有单独的登录页面，需要通过重定向处理</view>
+    <view class="">
+      2.登录动作在当前页面通过弹窗登录，登录后需要更新登录状态（或者刷新本页面，体验没那么好）
+    </view>
+    <view class="">3.静默登录，小程序可以直接login，通常情况下都是登录状态的</view>
+    <view class="leading-10">
+      用户是否已登录：<text>{{ isLogined ? '是' : '否' }}</text>
+    </view>
+    <button v-if="!isLogined" @click="setUserInfo">登陆</button>
+    <button v-else @click="clearUserInfo" class="mt-4">登出</button>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useUserStore } from '@/store'
+
+const userStore = useUserStore()
+
+const isLogined = computed(() => {
+  return userStore.isLogined
+})
+
+const setUserInfo = () => {
+  userStore.setUserInfo({ nickname: '菲鸽', avatar: '', token: 'abcdef' })
+}
+const clearUserInfo = () => {
+  userStore.clearUserInfo()
+}
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/demo/route-interceptor/index.vue

@@ -0,0 +1,24 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '自动登录（无需拦截）',
+  },
+}
+</route>
+
+<template>
+  <view class="mt-8 text-center">
+    <view class="">
+      自动登录，通常在小程序里面都会先自动登录，所以都是登录状态，无需拦截。这个项目不方便演示，后续开个新项目演示
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/demo/route-interceptor/login-auto.vue

@@ -0,0 +1,76 @@
+<route lang="json5" type="page">
+{
+  style: { navigationBarTitleText: '登陆拦截 - 登陆弹窗' },
+}
+</route>
+
+<template>
+  <view class="mt-8 text-center">
+    <view class="leading-10">
+      用户是否已登录：<text>{{ isLogined ? '是' : '否' }}</text>
+    </view>
+    <view>这里有一个按钮（比如点赞按钮），点击这个按钮需要先登录</view>
+    <button @tap="onClick">点赞菲鸽</button>
+    <uv-modal
+      ref="modal"
+      title="登陆"
+      content="模拟登陆，点击确认按钮即可"
+      @confirm="confirmLogin"
+    ></uv-modal>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useUserStore } from '@/store'
+import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+
+const userStore = useUserStore()
+const pages = getCurrentPages()
+console.log('pages:', pages)
+
+const modal = ref()
+
+const isLogined = computed(() => {
+  console.log('userStore=>', userStore)
+  const pages = getCurrentPages()
+  console.log('pages:', pages)
+  return userStore.isLogined
+})
+
+const confirmLogin = () => {
+  userStore.setUserInfo({ nickname: '菲鸽', avatar: '', token: 'abcdef' })
+  onClick() // 补偿机制，比较友好。当然，也可以让用户重新点击一下。
+  modal.value?.close()
+}
+const onClick = () => {
+  if (isLogined.value) {
+    console.log('用户已登录，可以点赞')
+    uni.showToast({ title: '点赞成功' })
+    // 这里执行接口请求
+    return
+  }
+  modal.value?.open()
+}
+
+/** 激活“分享给好友” */
+onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
+  console.log('options:', options)
+  return {
+    title: 'unibest 路由拦截、进入指定页面',
+    desc: 'unibest 演示示例',
+    // path: '/pages/demo/base/route-middleware?redirect=/pages/demo/base/route-interceptor?a=1&b=2',
+    path: 'pages/route-interceptor/index?name=feige&age=30&sex=male',
+  }
+})
+/** 激活“分享到朋友圈”， 注意：需要先激活“分享给好友” */
+onShareTimeline((): Page.ShareTimelineContent => {
+  return {
+    title: '自定义分享标题',
+    query: 'a=1&b=2',
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/demo/route-interceptor/login-model.vue

@@ -1,7 +1,7 @@
 <route lang="json5" type="page">
 {
   needLogin: true,
-  style: { navigationBarTitleText: '路由拦截' },
+  style: { navigationBarTitleText: '登陆拦截 - 登陆页面' },
 }
 </route>