Taro
一、Taro官网链接
Taro是 由凹凸实验室倾力打造的 一个开放式跨端跨框架解决方案，支持使用React、Vue.js、Nerv等框架来开发小程序、H5、react Native等应用。
二、思考一下，如果你第一次使用这款应用的时候需要登录，那么你第二次肯定不会想再登录一次了，所以依托微信这个母体，小程序可以在进入页面时直接加载本地的一些信息，所以我们可以在useEffect中调用。
————————————————
三、https://taro-docs.jd.com/taro/docs/apis/storage/setStorage
四、直接上代码：
useEffect(() => {
Taro.getStorage({
key: 'token',
success: function (res) {
console.log(res.data)
const token = res.data
deirectLogin(token)
}
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
// 从缓存里获取到token 直接登录
const deirectLogin = async (token: string) => {
queryUserSupplierRegister(token)
}
//登录 步骤 ......4 very good
const reqLogin = async (encryptoPasswd: string) => {
try {
const {
success = false, result = {
} } = await req.post('xxxxx.xxxxx.login', {
mobile: trim(phone), password: encryptoPasswd })
if (success) {
if (result.error && result.error.code) {
showMsg(result.error)
result.error.code === -34111 && setLimitFull(true)
} else {
const {
businessType = -1, mobile, token } = result
if (token) {
// 解决每次打开页面都需要重新登录的问题
Taro.setStorage({
//本地存储token
key: "token",
data: token
})
Taro.setStorage({
//本地存储mobile
key: "mobile",
data: mobile
})
setData('token', token)
setData('mobile', mobile)
showMsg('登录成功')
queryUserSupplierRegister(token)//登录页面的业务代码，此处不多赘述
} else {
showMsg('登录失败！')
}
}
}
五、退出登录时，需要清除本地存储中的 token
https://taro-docs.jd.com/taro/docs/apis/storage/clearStorage
代码块：
const handleMassage = (e) => {
Taro.clearStorage()//清除本地缓存token
}
return <WebView src={
jumpUrl} onMessage={
handleMassage} />
总结
本地存储就显得比较简单易懂了，当用户登录成功后你接收到服务器返回的数据后利用Taro.setStorage（）进行本地存储即可,用户退出登录的时候需要 Taro.clearStorage()。