【uni-app实战-分享01】uni-app微信公众号授权登录，特别是vue模式的坑

用uni-app的朋友们都知道，uni-app是用vue开发的，那么有2种页面展现方式。

方式1：history，方式2：hash。hash模式带了个#号，而且发布到手机上，页面不能刷新，一刷新就404了。没办法，只能是选history模式。

下面说下3点注意事项：

1、保留登录前的页面参数。为了不让参数传到后台，并且在微信授权链接带来带去，可以将参数和登录前的地址存到本地缓存，代码如下：

let pages = getCurrentPages();  

//如果不是登录页  

if ("pages/login/login" != currentPage.route) {  

//保存登录前的地址  

        uni.setStorageSync("currentPage", currentPage.route);  

        //保存登录前的参数  

        uni.setStorageSync("currentPageOptions", currentPage.options);  

}

2、后端代码。基本没什么好讲的，就是一个跳过去授权，然后回调。回调的话填uni-app的登录成功地址，写入缓存。

// 存入登录信息  

uni.setStorageSync('token', options.token);  

uni.setStorageSync('user_id', options.user_id);  

// 获取登录前页面  

let url = '/' + uni.getStorageSync('currentPage');  

// 获取登录前参数  

let pageOptions = uni.getStorageSync('currentPageOptions');  

if(Object.keys(pageOptions).length > 0){  

      url += '?';  

     for(let i in pageOptions){  

            url += i + '=' + pageOptions[i] + '&';  

     }  

     url = url.substring(0, url.length - 1);  

}  

// 重载页面  

uni.reLaunch({  

       url: url  

});

3、配置路由跳转，以nginx为例，否则访问不到。比如打包后的代码放在h5目录下，则按以下设置：

location /h5 {  

try_files $uri $uri/ @router;  

}  

location @router {  

         rewrite ^.*$ /h5/index.html last;  

}

经过以上3点设置，登录前的参数和页面能够保留和跳转，发布到手机端都能正常登录访问。

喜欢的朋友点个关注，全是实战干货。