uni-app——uniapp 跳转到其它页面后，关闭当前页面

### uni-app 中实现登录拦截的方法 在开发基于 `uni-app` 的应用时，确保用户已成功登录对于保护受权限控制的内容至关重要。通过结合 `axios` 请求库以及路由管理工具如 `uni-simple-router` 可以有效地创建一个健壮的登录拦截机制。 #### 使用 Axios 拦截器处理 Token 和未认证状态 为了实现在每次 HTTP 请求前自动附加访问令牌 (Token)，可以利用 `axios` 提供的请求/响应拦截功能来完成这一目标： ```javascript import axios from 'axios'; // 假设 store.js 是 Vuex 存储模块的位置 import { useStore } from '@/store'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, }); instance.interceptors.request.use( config => { const store = useStore(); // 如果存在 token，则将其加入到 Authorization header 中 if (store.getters['auth/token']) { config.headers.Authorization = `Bearer ${store.getters['auth/token']}`; } return config; }, error => Promise.reject(error), ); instance.interceptors.response.use(undefined, async function (error) { if (error.response.status === 401 || error.response.statusText === "Unauthorized") { try { await logoutUser(); // 清除本地存储中的token和其他敏感数据 window.location.href = '/login'; // 或者使用框架特定的方式重定向至登录页面 } catch (_) {} } return Promise.reject(error); }); ``` 上述代码片段展示了如何配置自定义的 `axios` 实例，在发送任何 API 请求之前检查是否存在有效的会话令牌，并相应地设置 `Authorization` 头部字段[^1]。当服务器返回的状态码为 `401 Unauthorized` 表明当前用户的凭证无效或不存在时，程序将会清除所有与身份验证有关的信息并将用户重定向回登录界面。 #### 结合 Uni-Simple Router 进行导航守卫 除了在网络层面上做防护外，还可以借助于 `uni-simple-router` 来增强安全性。具体来说就是添加全局前置钩子函数用于判断即将进入的目标路径是否需要先经过身份验证才能继续前进: ```javascript import VueRouter from '@dcloudio/vue-cli-plugin-uniapp/router' import router from './router' // 导入项目内的路由配置文件 import { useStore } from '@/store' Vue.use(VueRouter) const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); }; router.beforeEach((to, _, next) => { const requiresAuth = to.matched.some(record => record.meta.requiresAuth); const store = useStore(); if (!requiresAuth) return next(); if (!store.getters['auth/isAuthenticated']) { next({ path: "/login", query: { redirect: to.fullPath }} ); } else { next(); } }) ``` 此部分逻辑会在每一次试图切换视图的时候被执行一次。如果发现下一个目的地含有 `meta.requiresAuth=true` 属性标记说明该页仅限已注册成员查看；此时再进一步确认是否有合法的身份证明材料可用——如果没有的话就强制跳转去登陆界面对应位置等待输入账号密码信息[^2]。