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 協議》，轉載必須註明作者和本文連結