uni-app 登录成功后自动跳转至登录前页面
一、新建配置文件，位于根目录下，config.js
// 应用全局配置
module.exports = {// 应用信息appInfo: {loginPage: "/pages/login",cacheRouteKey: "unLoginTargetRoute"// 更多配置项...}// 更多配置项...
}
二、新建文件：router.js，位于：utils文件夹下
import { appInfo } from '@/config.js'export function cacheRouter(_router) {let router = _router// 获取当前页面栈信息const pages = getCurrentPages()if(pages && pages.length) {// 获取当前页面路由信息const currentPage = pages[pages.length - 1]router = '/' + currentPage.routeif(router !== appInfo.loginPage) {let options = undefined// #ifdef MP-WEIXINoptions = currentPage.options// #endif// #ifdef H5if(currentPage.__page__) {options = currentPage.__page__.options}// #endifif(options) {let params = ''for(let key in options) {params += '&' + key + '=' + options[key]}if(params && params.length) {router += '?' + params.substring(1)}} else {// #ifdef MP-WEIXINif(currentPage.$page && currentPage.$page.fullPath) {router = currentPage.$page.fullPath}// #endif// #ifdef H5if(currentPage.__page__ && currentPage.__page__.fullPath) {router = currentPage.__page__.fullPath}// #endif}}}if(router) {uni.setStorageSync(appInfo.cacheRouteKey, router)}
}
三、H5兼容适配
在App.vue中添加以下代码
import config from '@/config.js'
import { cacheRouter } from '@/utils/router.js'onLaunch: function() {//#ifdef H5this.checkLogin()//#endif
},
methods: {checkLogin() {if(// TODO 未登录判断) {const _uri = window.location.hreflet _route = ''// 默认【域名+#+页面】分割值if (_uri.indexOf('#') !== -1) {_route = _uri.substring(_uri.indexOf('#') + 1)}// h5/：为manifest.json下【Web配置 -> 运行的基础路径】if (_uri.indexOf('h5/') !== -1) {_route = _uri.substring(_uri.indexOf('h5/') + 3)}cacheRouter(_route)uni.reLaunch({url: config.appInfo.loginPage})}}
}
四、通配
在拦截器或后端请求方法中，引入方法，合适位置添加使用方法代码即可。
例如：
1、拦截器
// 页面跳转验证拦截器
import { appInfo } from '@/config.js'
// 登录页面
const loginPage = appInfo.loginPage// 页面白名单
const whiteList = [loginPage, '/pages/register', '/pages/common/webview/index'
]// 检查地址白名单
function checkWhite(url) {const path = url.split('?')[0]return whiteList.indexOf(path) !== -1
}let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
list.forEach(item => {uni.addInterceptor(item, {invoke(to) {if (// TODO 验证是否登录) {if (to.url === loginPage) {uni.reLaunch({url: "/"})}return true} else {if (to.url !== loginPage) {// 缓存当前路由信息cacheRouter(to.url)}// 验证是否放行if (checkWhite(to.url)) {return true}uni.reLaunch({url: loginPage})return false}},fail(err) {console.log(err)}})
})
2、后端请求方法
import config from '@/config'
import { cacheRouter } from '@/utils/router.js'
const loginPage = config.appInfo.loginPage// TODO 判断接口返回状态码code是否正常，通常code=401时，代表未登录
if (code === 401) {cacheRouter()showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {if (res.confirm) {// TODO 跳转登录页面}})
}
五、登录页面
import { appInfo } from '@/config.js'// 登录成功后调用，处理函数
loginSuccess(result) {let unLoginTargetRoute = uni.getStorageSync(this.appInfo.cacheRouteKey)if (unLoginTargetRoute) {uni.removeStorageSync(this.appInfo.cacheRouteKey)} else {unLoginTargetRoute = '/pages/index'}uni.reLaunch({url: unLoginTargetRoute})
}
六、注销登录，移除缓存
import { appInfo } from ‘@/config.js’
uni.removeStorageSync(this.appInfo.cacheRouteKey)
