A brief analysis of the implementation method of uniapp initialization without login jump

When developing using UniApp, we may encounter pages that require users to log in to enter, such as shopping carts, order pages, etc. So, how to automatically jump to the login page when not logged in? This article will give you a detailed introduction to the implementation method of UniApp initialization without login jump.

1. Requirements Analysis

Add the login function to the application, and enable it to jump to the login page when entering the relevant page when not logged in.

2. Implementation ideas

1. Write the login-related logic code in the App.vue file.
2. Use a routing interceptor to check whether the user is logged in when entering a page that requires login. If not, it will automatically jump to the login page.
3. Use Vuex to manage user information to store login status and transfer user information.

3. Code implementation

1. Add login logic in App.vue

We can execute the login verification logic in the created life cycle function in App.vue . For example:

created(){
    // 检查用户是否已登录
    let loginInfo = uni.getStorageSync('loginInfo') || null;
    if(loginInfo){
        this.$store.commit('saveUserInfo', loginInfo);
    }else{
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
}

Here, we obtain the locally stored login information through the uni.getStorageSync() method. If the login information exists, pass the user information to the Vuex state manager; otherwise, jump to the login page.

2. Implement route interceptor

Under normal circumstances, the login status is checked before route jump. We can define a route interceptor to perform relevant operations before jumping to the page that requires login.

Introduce routing in main.js:

import router from './router';

and add routing interceptor:

router.beforeEach((to, from, next) => {
    // 进入需要登录的页面前先进行登录状态检查
    let isLogin = store.getters.getLoginStatus;
    if (to.meta.requireAuth) { 
        // 如果未登录，则跳转至登录页面
        if(!isLogin){
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            });
        }else{
            next();
        }
    }else{
        next();
    }
});

Here, we judge the page based on whether the requireAuth field is marked in the routing Whether to require login. If you need to log in, check whether the current user is logged in. If not, jump to the login page; otherwise, allow continued access. If no login is required, jump directly.

3. Implement user information storage and transfer

Create a module named userInfo in the Vuex state manager to manage user information. We can define some user-related getters, mutations and actions in it.

In the userInfo.js file, define the following code:

const state = {
    userInfo: null
}

const getters = {
    getUserInfo: state => state.userInfo,
    getLoginStatus: state => state.userInfo != null
}

const mutations = {
    saveUserInfo (state, userInfo) {
        state.userInfo = userInfo;
        uni.setStorageSync('loginInfo', userInfo);
    },
    logout(state){
        state.userInfo = null;
        uni.removeStorageSync('loginInfo');
    }
}

const actions = {
    login({ commit }, userInfo) {
        // 登录操作
        commit('saveUserInfo', userInfo);
    },
    logout({ commit }){
        // 登出操作
        commit('logout');
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

Here, we define functions such as getUserInfo, getLoginStatus, saveUserInfo, logout and login for obtaining, storing and clearing User information, and simulated login and logout operations. Among them, when the saveUserInfo method stores user information, in addition to passing the user information to the state, it also stores it locally to facilitate persistent storage.

4. Summary

By using the routing interceptor and Vuex state manager provided by UniApp, the function of automatically jumping to the login page when not logged in is realized. If you need to use login data in other pages, you only need to introduce Vuex in the corresponding component, which is very convenient.

The above is the detailed content of A brief analysis of the implementation method of uniapp initialization without login jump. For more information, please follow other related articles on the PHP Chinese website!