uniapp 全局登录
全局登录的实现方法
在UniApp中实现全局登录功能，通常需要结合Vuex状态管理和本地存储技术。以下是几种常见实现方式：
使用Vuex管理登录状态
在store目录下的index.js中定义登录状态：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: null,
isLogin: false
},
mutations: {
login(state, userInfo) {
state.userInfo = userInfo
state.isLogin = true
uni.setStorageSync('userInfo', userInfo)
},
logout(state) {
state.userInfo = null
state.isLogin = false
uni.removeStorageSync('userInfo')
}
}
})
export default store本地存储持久化
在App启动时从本地存储加载登录状态：
// main.js
import store from './store'
// 初始化时读取本地存储
const userInfo = uni.getStorageSync('userInfo')
if (userInfo) {
store.commit('login', userInfo)
}全局登录拦截
在pages.json中配置需要登录的页面：
{
"pages": [
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "个人中心",
"requiresAuth": true
}
}
]
}在main.js中添加全局路由拦截：
// 路由拦截
uni.addInterceptor('navigateTo', {
invoke(e) {
const pages = getCurrentPages()
const page = pages[pages.length - 1]
if (page.route === 'pages/user/user' && !store.state.isLogin) {
uni.navigateTo({
url: '/pages/login/login'
})
return false
}
return true
}
})封装登录方法
在common目录下创建login.js：
export function login() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success(res) {
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success(infoRes) {
const userInfo = {
...infoRes.userInfo,
code: res.code
}
store.commit('login', userInfo)
resolve(userInfo)
},
fail: reject
})
},
fail: reject
})
})
}
export function checkLogin() {
return store.state.isLogin
}全局混入登录检查
在main.js中添加全局混入：
Vue.mixin({
methods: {
$checkLogin() {
if (!this.$store.state.isLogin) {
uni.navigateTo({
url: '/pages/login/login'
})
return false
}
return true
}
}
})注意事项
- 用户敏感信息建议加密存储
- 登录状态需要与服务端保持同步
- 需要考虑token过期等异常情况
- 不同平台可能有不同的登录实现方式
这些方法可以组合使用，根据项目需求选择适合的方案。全局登录的核心是统一管理用户状态，并在需要时进行验证和拦截。
