집 > 기사 > 웹 프론트엔드 > Uniapp에서 로그인 확인 및 페이지 이동을 구현하기 위해 경로 인터셉터를 사용하는 방법

Uniapp에서 로그인 확인 및 페이지 이동을 구현하기 위해 경로 인터셉터를 사용하는 방법

PHPz원래의: 2023-10-26 12:22:571195검색

유니앱에서 경로 인터셉터를 사용하여 로그인 인증 및 페이지 이동을 구현하는 방법

모바일 인터넷이 발전하면서 점점 더 많은 애플리케이션이 모바일 애플리케이션으로 개발되고 있습니다. Uni-app은 개발자가 코드 세트를 사용하여 여러 플랫폼에서 애플리케이션을 구축할 수 있도록 하는 Vue 기반 개발 프레임워크입니다. 모바일 애플리케이션에서는 로그인 확인 및 페이지 이동이 일반적인 요구 사항입니다. 이 기사에서는 Uni-app에서 경로 인터셉터를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

경로 인터셉터 추가
Uni-app에서는 경로 인터셉터를 사용하여 경로 점프 전에 로그인 확인과 같은 일부 작업을 수행할 수 있습니다. 먼저 새로 생성된 main.js 파일에서 uni-simple-router 라이브러리를 참조한 다음 Vue.use를 사용해야 합니다. Vue용 플러그인을 등록하는 방법입니다. 샘플 코드는 다음과 같습니다. main.js文件中引用uni-simple-router库，然后使用Vue.use方法将其注册为Vue插件。示例代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import uniRouter from 'uni-simple-router'

Vue.use(uniRouter, {
  routes: router
})

登录校验
要实现登录校验，我们需要在路由拦截器中判断用户是否登录。如果用户未登录，则跳转到登录页面。我们可以在router.js文件中定义路由的meta字段，用来标识需要进行登录校验的路由。示例代码如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: { requireAuth: true } // 需要进行登录校验
  }
]

编写路由拦截器
在路由拦截器中，我们可以使用beforeEach方法来进行登录校验和页面跳转操作。示例代码如下：

uniRouter.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断是否需要登录校验
    const token = uni.getStorageSync('token') // 获取本地存储的token
    if (token) {
      next()
    } else {
      next('/login') // 跳转到登录页面
    }
  } else {
    next()
  }
})

在上述代码中，我们使用uni.getStorageSync方法来获取本地存储的token。如果存在token，则说明用户已登录，继续执行后续操作。如果不存在token，则说明用户未登录，跳转到登录页面。

页面跳转
在需要进行登录校验的页面组件中，我们可以使用this.$router.push

methods: {
  goToProfile() {
    this.$router.push('/profile')
  }
}

로그인 확인을 구현하려면 라우팅 인터셉터에 사용자가 로그인되어 있는지 확인해야 합니다. 사용자가 로그인되어 있지 않은 경우 로그인 페이지로 이동합니다. router.js 파일에서 경로의 meta 필드를 정의하여 로그인 확인이 필요한 경로를 식별할 수 있습니다. 샘플 코드는 다음과 같습니다.

beforeEach

uni.getStorageSync

this.$router.push

위 내용은 Uniapp에서 로그인 확인 및 페이지 이동을 구현하기 위해 경로 인터셉터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Token JS this router

성명：