Discussion on triggering the login process

the project uses the authentication mechanism of jwt token, and the login status is the request with token.
but what is more puzzling is what action should be taken to trigger the behavior of logging in and getting token:

immediately after entering the first page, determine whether token is valid. If it is invalid, login will be triggered
does not necessarily determine that token, waits for the user to log in as soon as it is entered. If the user does not log in actively, the login will be triggered when the API returns 401.

the first case is relatively simple, but some requirements really cannot be logged in at the beginning (for example, in the mall, many people just want to go in and see the products at first, but do not want to register), so it is also a disturbing situation for me to solve the second situation.

the problem with the second case , what to do with the original request after the login is triggered . On the web side, the original request can be triggered again by refreshing the page, but on the Mini Program side, there is no such thing as page refresh, so after logging in and getting the token, re-request the data to be returned to the original interface
(may be poorly encapsulated, please advise ~)

export default function http({
     url,
     method = "get",
     data = {},
     success = () => {},
     fail = () => {},
     error = () => {}
 }) {
     return new Promise((resolve, reject) => {
         fly.request(url, data, {
             method
         }).then(async res => {
             if (res.code == 1) {
                 return resolve(await success(res))
             }
             return reject(await fail(res))
         }).catch(async err => {
             console.log(err)
             switch (err.status) {
                 case 401:
                     await xcxLogIn()
                     await http({
                         url,
                         method,
                         data,
                         success,
                         fail,
                         error
                     })
                     return resolve()
                     break
                 default:

             }
             return reject(await error(err))
         })
     })
 }

but there are other problems.
for example, when I enter a page, I need a userInfo and a harvest address shippingAddressList, because the data is hosted on vuex and initialized to null, so I have to first determine whether these two are for null,. If so, I have to request the interface. 401 triggers the login and returns the data, but in this way, wherever I need userInfo and shippingAddressList, I have to make a judgment first, which is too inelegant. If you do not log in and the interfaces of userInfo and shippingAddressList are requested at the same time, the login will be repeated because there is no way to lock other requests when logging in.

the description may be a little messy.
I"d like to ask you about the solution to login ~

import store from '@/store'; import {Toast} from 'vant'; /** * * * */ export default (router) => { router.beforeEach((to, from, next) => { // if (to.meta.limit !== false && !store.state.appUser.user_id) { // store.state.app.route = to.path; next({path: '/login'}); } // else if (to.meta.login === true && store.state.appUser.type !== 'success') { Toast('~'); // store.state.app.route = from.path; next({path: '/login'}); } else { // if (!store.state.app.routeStopJump) { if (to.meta.title) { document.title = to.meta.title; } else { document.title = store.state.app.name; } next(); } else { next(false); } } }); }