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 协议》,转载必须注明作者和本文链接

简洁略带风骚

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 2

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

2周前 评论
php_yt (楼主) 2周前
pigzzz (作者) 2周前

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

2周前 评论
php_yt (楼主) 2周前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!