uniapp 全局登录
uniapp 全局登录的实现方法
在 uniapp 中实现全局登录功能，通常需要结合本地存储和全局状态管理。以下是几种常见的实现方式：
使用 Vuex 管理登录状态
安装 Vuex 并创建 store 模块管理用户登录状态：
// 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封装全局登录方法
在 main.js 中挂载全局方法：
// main.js
import store from './store'
Vue.prototype.$login = {
checkLogin() {
return store.state.isLogin || uni.getStorageSync('userInfo')
},
getUserInfo() {
return store.state.userInfo || uni.getStorageSync('userInfo')
}
}路由拦截实现自动登录
在 pages.json 中配置需要登录的页面路由，并在 App.vue 中检查登录状态：
// App.vue
export default {
onLaunch() {
const userInfo = uni.getStorageSync('userInfo')
if (userInfo) {
this.$store.commit('login', userInfo)
}
}
}封装请求拦截器
在请求拦截器中自动添加 token：
// utils/request.js
uni.addInterceptor('request', {
invoke(args) {
if (Vue.prototype.$login.checkLogin()) {
args.header = {
...args.header,
'Authorization': 'Bearer ' + Vue.prototype.$login.getUserInfo().token
}
}
return args
},
fail(err) {
console.log('interceptor-fail', err)
}
})登录过期处理
在响应拦截器中处理 token 过期：
uni.addInterceptor('request', {
success(args) {
if (args.statusCode === 401) {
uni.showToast({
title: '登录已过期',
icon: 'none'
})
store.commit('logout')
uni.reLaunch({
url: '/pages/login/login'
})
}
return args
}
})注意事项
- 敏感信息如 token 建议使用加密存储
- 退出登录时要清除所有相关存储
- 需要处理多端同步问题，特别是 App 和 H5 端
- 建议配合后端实现 token 刷新机制
- 生产环境需要增加更完善的错误处理逻辑
以上方案可根据实际项目需求进行组合或调整，实现适合业务场景的全局登录功能。
