uni-app vue3 路由拦截

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app vue3 路由拦截

由于提供的HTML内容中并没有包含除基本信息标题外的其他文本内容，也没有提供开发环境、版本号或项目创建方式等信息，因此最终的Markdown文档仅保留了空的文章标签。
Harmonyos Next教程
4 回复

同求


使用拦截器api处理对路由的拦截

如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭，或者查看 官方文档

在uni-app中使用Vue 3进行路由拦截，可以通过Vue Router的导航守卫（Navigation Guards）来实现。在Vue 3中，虽然uni-app内置了一些路由管理功能，但通常我们还是会结合Vue Router或者uni-app的页面生命周期来实现路由拦截。以下是一个基于Vue Router的示例，假设你已经将Vue Router集成到了uni-app项目中。

首先，确保你已经安装了Vue Router，并且在项目中进行了配置。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  // 其他路由配置...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token'); // 假设token存在表示用户已登录

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next(); // 确保一定要调用 next()
  }
});

export default router;

在上面的代码中，我们定义了两个路由：一个是需要认证的Home页面，另一个是不需要认证的Login页面。在路由配置中，我们通过meta字段给需要认证的页面添加了一个requiresAuth: true的标识。

然后，我们使用了Vue Router的全局前置守卫beforeEach来检查即将访问的路由是否需要认证。如果需要认证但用户未登录（这里通过检查localStorage中的token来判断），则重定向到登录页面，并附带一个redirect参数，以便登录后能够重定向回原来想要访问的页面。

在main.js中，你需要确保已经使用了这个路由配置：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

这样，你的uni-app项目就实现了基于Vue Router的路由拦截功能。注意，在实际项目中，你可能需要根据具体需求调整认证逻辑和重定向策略。

回到顶部