uniapp 全局检查登陆并跳转函数

环境

laravel5.7 jwt-auth uniapp

场景

进入页面 pages/index/index 时检查登陆状态,如未登录跳转到登陆页面 pages/index/login,登陆成功后返回跳转前的页面 pages/index/index

参考

封装全局登录检查函数并部署

挂载全局登陆检查函数 main.js

import Vue from 'vue'
import App from './App'

import { http } from '@/utils/luch/index.js'
Vue.prototype.$http = http

//backpage : 登录后返回的页面
//backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]
import jwt from '@/utils/auth/jwt.js';
Vue.prototype.checkLogin = async (backpage,backtype) => {
    var TOKEN  = jwt.getAccessToken();
    let status = false;
    if(TOKEN){
        await http.get('/api/auth/check').then(res=>{
            console.log('check auth');
            status = res.data.data.user;
        }).catch(err=>{
            console.log('status 401 not login')
            status = false;
        })
    }else{
        status = false;
        console.log('not token')
    }

    console.log(status,'result status');
    if(status){return status}else{

        uni.showToast({icon:'none',title: '请登陆',duration:1000});
        // 跳转到登陆页面
        setTimeout(function(){
            uni.redirectTo({url:'/pages/index/login?backpage='+backpage+'&backtype='+backtype});
        },1500);

        return false;
    }
}

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

后端 check 方法

Route::get('check','AuthController@check'); // 检测登陆状态
// 能请求到 check() 一定是登陆的,未登陆在权限中间件中返回 401
public function check(){
   return Y::json(['user'=>auth()->user()]);
}

/pages/index/index

<script>
    export default {
        data() {
            return {
                me: {},
            }
        },
        onLoad() {
        // 页面一加载时调用 参数含义:
        // "/pages/index/index": 当前页面地址
        // "1": 跳转方式是 redirect
            let user =  this.checkLogin('/pages/index/index',1);

            if(user){ this.me = user }

            console.log('has login and save userinfo');
        },
    }
</script>

登陆页面 pages/index/login

<script>
    import jwt from '@/utils/auth/jwt.js';
    export default {
        data() {
            return {
                backpage:'',
                backtype:'',
            }
        },
        onLoad(o) {
            this.backpage = o.backpage;
            this.backtype = o.backtype;
            console.log(this.backpage,this.backtype,'backage and backtype');
        },
        methods: {
            login: function(e){
                let value = e.detail.value;
                if( !value.username || !value.password ){
                    uni.showToast({icon:'none',title: '账号密码不能为空',duration:2000});
                    return;
                }
                this.$http.post('/api/auth/login',value).then(res=>{
                    let data = res.data;
                    if(data.code == 0){
                        jwt.setAccessToken(res.data.data.access_token);
                        // 跳回
                        if(this.backtype == '1'){
                            uni.redirectTo({ url: this.backpage });
                        }else{
                            uni.switchTab({ url: this.backpage });
                        }
                    }else{
                        uni.showToast({icon:'none',title: data.msg,duration:2000});
                    }

                }).catch(err=>{
                    // console.log(err,'err');
                    uni.showToast({icon:'none',title: err.data.msg,duration:2000});
                })
            }
        }
    }
</script>
本作品采用《CC 协议》,转载必须注明作者和本文链接
welcome come back
讨论数量: 2

这个场景,感觉 vue-routerbeforeEach更适合

3年前 评论
php_yt (楼主) 3年前
pigzzz (作者) 3年前

能否把登录授权部分还有记录更新用户信息部分做个开源项目分享学习一下?

3年前 评论
php_yt (楼主) 3年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
94
粉丝
24
喜欢
156
收藏
346
排名:325
访问:2.9 万
私信
所有博文
社区赞助商