路由权限（vue、react）

最新推荐文章于 2024-10-13 19:05:48 发布

菜而不自知

最新推荐文章于 2024-10-13 19:05:48 发布

阅读量412

点赞数 6

文章标签： react.js vue.js javascript

本文链接：https://blog.csdn.net/m0_65245884/article/details/135551259

版权

本文介绍了如何在Vue3项目中使用vue-router进行路由配置，并结合ReactRouter实现组件间的导航，同时包含登录验证逻辑，确保只有登录用户才能访问特定页面。

摘要由CSDN通过智能技术生成

Vue3

1、main.js文件如下：

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import route from './route'

const app = createApp(App)
app.use(route).mount('#app')

2、route文件如下：

//route.js

import { createRouter, createWebHistory } from 'vue-router'

// 导入路由页面组件
import login from '../view/user/login'
import dataStandar from '../view/dataStandar'
import FinalStandard from '../view/FinalStandard'

const routes = [
  {
    path: '/login', component: login, name: 'login'
  },
  {
    path: '/data-standard', component: dataStandar, name: 'data-standard',
    children: [
      {
        path: 'final-standard', component: FinalStandard, name: 'final-standard'
      }
    ]
  },
  { path: '/', redirect: '/data-standard/final-standard' }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const token = sessionStorage.getItem('token')
  if (token || to.path == '/login') {
    next()
  }
  else {
    next('/login')
  }
})

export default router

React

1、App.js文件如下

// App.js

import Routers from './router'
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
function App () {
  const navigate = useNavigate()
  const token = sessionStorage.getItem('token') ? sessionStorage.getItem('token') : ''
  const isAuth = token 
  useEffect(() => {
    if (!isAuth) {
      navigate('/login')
    }
  }, [isAuth, navigate])

  return (
    <div className="App">
      <Routers />
    </div>
  )
}
export default App

2、Routers文件如下：

// Routers.js

import { Navigate, useRoutes } from 'react-router-dom'
import Login from '../pages/Login/index'
import Metadataplatform from '../pages/Metadataplatform/index'
import Homepage from '../pages/Homepage/index'

const Routers = () => {
  const Elements = useRoutes([
    {
      path: '/metadataplatform',
      element: <Metadataplatform />,
      children: [
        {
          path: 'homepage',
          element: <Homepage />,
        }]
    },
    {
      path: '/',
      element: <Navigate to="/metadataplatform/homepage" />
    },
    {
      path: '/login',
      element: <Login />,
    }
  ])
  return Elements
}
export default Routers