uniapp之 登录成功后返回之前页面

目录

前言

分析

第一步

代码

代码 一

方式二 

温馨提示

小结

---

前言

在完善小程序效果时，想新增一个当用户没有登录时 点击跳转到某个页面实现交易啊，或者添加什么功能时，检验有没有登录 若没有的话 ,就让用户 跳转登录页面并且可以回跳至当前页面

分析

 登录成功之后再返回之前的页面

核心实现思路：在自动跳转到登录页面成功之后，把返回页面的信息存储到 vuex 中，从而方便登录成功之后，根据返回页面的信息重新跳转回去。

返回页面的信息对象，主要包含 { type, from } 两个属性，其中 type 表示以哪种方式导航回之前的页面；from 表示之前页面的 url 地址；

第一步

就是需要把那个地址存起来

代码

在 user.js自己创建的

export default {

  namespaced: true,

  state：() => ({

    A: {
			//跳转回页面的路径
			//页面的类型
		}

    }),

  mutations: {

	updateA(state, obj) {
		state.A= obj
		console.log(state.A)
	  }
    }
}

 把 A存起来后， 假设登录页面为 B  当前页面为 C

此时在 C页面 

import { mapMutations } from 'vuex'


methods: {

  ...mapMutations('user.js中自己创建的名字', ['updateA']),

  //判断是否登录
  if (!this.token) {
  //console.log('1');
	let n = 3
	uni.$showMsg(`请登录后进行结算,页面将于${n}秒后跳转到登录页面`)
	//倒计时跳转到登录   别忘了 在 data 里面定义 timer 为 null
	let timer = setInterval(() => {
	   n--
	if (n === 0) {
	  //清空定时器
	clearInterval(timer)
	//跳转页面
	uni.switchTab({
	  url: '/pages/my/my',
	  success: () => {
	  //设置A参数
      // 调用 vuex 的 updateA方法，把跳转信息存储到 Store 中
	  this.updateA({
      // 从哪个页面跳转过去的
	  from: '/pages/C/C',
      // 跳转的方式
		type: 'switchTab'
	  })
		}
	     })
	   return
	 }
	//打开弹窗
	  uni.$showMsg(`请登录后进行结算,页面将于${n}秒后跳转到登录页面`)
	}, 1000)
	return
  }
    
}

 这里的判断有没有token  token的话，通常在我们登录的时候就存起来了

那这里取token就很简单了，但这里有两种方式取

第一种

 import { mapState } from 'vuex'

  computed: {
      ...mapState('名字', ['token'])
    },

第二种就是

uni.getStorageSync('token')

B页面

通过 mapState 和 mapMutations 辅助方法，将 vuex 中需要的数据和方法，映射到当前页面中使用

代码 一

// 按需导入辅助函数
import { mapMutations, mapState } from 'vuex'

export default {
  computed: {
    // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
    ...mapState('名字', ['A']),
  },
  methods: {
    // 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用
    ...mapMutations('名字', [ 'updateA']),


    // 调用登录接口，换取永久的 token
async login() {
  // 省略其它代码...
    
  // 判断 vuex 中的 A是否为 
  // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
  this.navigateBack()
}

    // 返回登录之前的页面
  navigateBack() {
  // 判断A 不为 空 且 导航方式为 switchTab
  if (this.A&& this.A.type=== 'switchTab') {
    // 调用小程序提供的 uni.switchTab() API 进行页面的导航
    uni.switchTab({
      // 要导航到的页面地址
      url: this.A.from,
      // 导航成功之后，把 vuex 中的 A对象重置为 空
      complete: () => {
        this.updateA(null)
      }
    })
  }
}
  },
}

方式二 

 //自动跳转回C页面-不是所有的登录都需自动跳转,只有在C页面进行一定功能需跳转到登录页面时,才需要跳转回去
        
这里直接在

async login() {


....其他的业务代码

if (Object.keys(this.A).length !== 0) {
     let param = {
       url: this.A.from,
       success: () => {
       //清空A
          this.A({})
          }
        }
       //判断要返回的页面类型
         if (this.A.type === 'switchTab') {
           uni.switch(param)
          } else {
            uni.navigateTo(param)
          }
        }

}

温馨提示

我试过这个方法，有个弊端，虽说能跳转回去，但没有数据，还需传值。。

后来我觉得麻烦，就跟后端的大哥讨论过这个问题，后经讨论决定在首页的时候，让用户必须登录，若没有登录就让跳转到登陆页

后给我弄了一个状态码，若首页出现这个状态码，就让用户去登录，

不成想 之前完成的，回跳原页面，这个方法，用不到，索性就写篇文章记录下

小结

	uni.switchTab({
		url: '/pages/my/my',
		success: () => {
		  //设置A参数
          // 调用 vuex 的 updateA方法，把跳转信息存储到 Store 中
		  this.updateA({
            // 从哪个页面跳转过去的
			  from: '/pages/C/C',
            // 跳转的方式
			type: 'switchTab'
		})
	}
})

若 跳转的 from 页面（也就是当前页面）不是 在 pages 页面下的 而是分包下的

那 前面的 uni.switchTab 则要改为 uni.navigateTo ，后面的type 也要 改为 navigateTo

上面的 if 判断 也要改为 下面的

  if (this.A.type === 'navigateTo ') {
            uni.navigateTo(param)
          } else {
            uni.navigateTo(param)
          }

其实嘛，我觉得，还是在首页让后端给个状态码，检测有没有登录，若没有登录的话，返回状态码去登录，那若还是不登录，就只展示首页内容，不让用户点击进入