小程序实现鉴权

如何封装一个鉴权

• 简单来说就是封装一个插槽组件

<slot wx:if="{{isLogin}}"></slot>  // html

//组件中的js文件

data:{
	isLogin : false // 控制插槽的见性
}
lifetime :{
	attached() {
		// 判断是否登录,更新isLogin的值
	}
}

• 使用的时候将需要鉴权的页面放到组建中即可

<authorization>
   需要鉴权的页面
</authorization>

小程序登录页面跳转---鉴权(相当于vue中路由守卫)

需求 : 当我们进入鉴权页面时,如果携带token进入则通过判断正常进入,如果没有携带token就进入鉴权页面,我们需要打回到登录页面,且需要获取当前被打回的页面,将该页面的路径当做值传递到登录页面,当我们下次拿到token登录的时候还是能够回到我们被打回的页面中?

鉴权 : 有些页面只给登录用户访问

创建并注册一个组件,在组件中创建一个插槽,用于放置登录之后才能访问的页面
只有当我们点击登录才能获取token 这个时候token 才会存放到本地

当我们点击登录跳转到鉴权页面的时候,我们就已经将token存到本地了

// 页面跳转方法  所有检验成功之后才会执行跳转
事件处理函数() {
	... 其他处理的事情	
wx.redirectTo({url:'跳转地址'})
}

携带token跳转到我们需要访问的页面时 , 获得访问权限,这个权限其实就是我们在鉴权组件中设置的一个页面的可见性 ; 首先我们需要将获取到的token存到一个全局都能拿到数据的地方===app.js中

App({
  //数据存在全局 定义方法 方法可以全局调用
  // 存token
  setToken (type,token){
    this[type] = token
    // 本地存储
    wx.setStorageSync(type, token)
  },
  //取token
  getToken(){
    return wx.getStorageSync('token')
  },
  globalData: {},
})

当我们点击登录按钮并且拿到token之后 跳转到鉴权页面时,我们需要在鉴权组件中去获取token 通过判断是否携带token,如果没有携带token则会被打回到登录页

鉴权组件 鉴权组件的名字为 authorization

getCurrentPages() 小程序全局api

Component({
  data:{
    isLogin: false //访问页面可见
  },
	// 在鉴权组件的声明周期钩子函数中拿全局的token 
  lifetimes:{
    attached(){
      // 取出全局token
      const app = getApp()
      const token = app.getToken() 
		// !! 双取反 转换为布尔值 
		// 当登录进入该页面时 如果携带token就为true 否则为false
      this.setData({isLogin: !!token})
			
	   // 解决提出的没有携带token 进入页面被打回且会携带该页面路径返回到登录页中的需求
      // 在当前的位置,如何获取当前页面信息?
      const pages = getCurrentPages() // 全局api 得到的是一个数组
			console.log(pages) // pages中有我们需要的route
      // 数组的最后一个元素就是最近访问的页面
      const lastPage = pages[pages.length - 1]
      console.log(lastPage)
			
      // 如果没有token就跳转到login页面
	  // ? 是携带值 redirectURL 是自定义的变量名  lastPage.route是我们通过getCurrentPages()
	  // 获取到的当前被打回页面的路径
      if(!token){
        wx.redirectTo({
          url: '/pages/login/index?redirectURL=/' +lastPage.route,
        })
      }
    }
  }
})

当我们被打回到登录页面时,我们需要接收鉴权页面传回来的路径值

import validate from 'wechat-validate'
Page({
  // 被打回的时候记录回来的地址
	// 返回的是个对象 我们直接结构了对象拿到被打回的页面的路径
  onLoad({redirectURL}){
    // 可以直接给这个对象挂值
    this.redirectURL = redirectURL
  },
    // 需求 从哪个页面被打回就记录哪个页面 登录之后还是会跳转到被打回的页面
		//  '/pages/profile/index' 默认设置的一个页面
    const url = this.redirectURL || '/pages/profile/index'
    wx.redirectTo({
      url,
    })
  }
})