React/Vue实现路由鉴权/导航守卫/路由拦截

这篇具有很好参考价值的文章主要介绍了React/Vue实现路由鉴权/导航守卫/路由拦截。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)

一. React项目中 

1、实现思路

自己封装 AuthRoute 路由鉴权高阶组件,实现未登录拦截,并跳转到登录页面

思路为:判断本地是否有token,如果有,就返回子组件,否则就重定向到登录Login

2、实现步骤

  1. 在 components 目录中,创建 AuthRoute/index.js 文件

  2. 判断是否登录

  3. 登录时,直接渲染相应页面组件

  4. 未登录时,重定向到登录页面

  5. 将需要鉴权的页面路由配置,替换为 AuthRoute 组件渲染

3、代码实现

/src/routes/AuthRoute.js

// 路由鉴权
// 1. 判断token是否存在
// 2. 如果存在 直接正常渲染
// 3. 如果不存在 重定向到登录路由

import { Navigate } from "react-router-dom";
// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件
// 这里的AuthRoute就是一个高阶组件

function AuthRoute({ children }) {
  // 获取token
  const tokenStr = window.localStorage.getItem('token');
  // 如果token存在 直接正常渲染
  if (tokenStr) {
    return <>{children}</>
  }
  // 如果token不存在,重定向到登录路由
  else {
    return <Navigate to='/login' replace />
  }
}
{/*
 <AuthRoute> <Layout /> </AuthRoute> 
 登录:<> <Layout /> </>
 非登录:<Navigate to="/login" replace />
*/ }
function LoginRoute({ children }) {
  const token = window.localStorage.getItem('token');
  if (token) {
    return <Navigate to="/" replace></Navigate>;
  } else {
    return <>{children}</>;
  }
}
export { AuthRoute,LoginRoute }

src/routes/index.js路由表文件

import Layout from "@/pages/Layout";
import Login from "@/pages/Login";
import { AuthRoute ,LoginRoute} from "@/routes/AuthRoute";

// eslint-disable-next-line
export default [
  // 不需要鉴权的组件Login
  {
    path: "/login",
    element: <LoginRoute>
                <Login />
             </LoginRoute>
  },
  // 需要鉴权的组件Layout
  {
    path: "/",
    element: <AuthRoute>
      <Layout />
    </AuthRoute>
  }
]

二. Vue项目中

1、实现思路

在Vue的router路由表文件中,存在官方封装好的API:beforeEach

2、代码实现

/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 路由懒加载
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path: "/welcome", component: Welcome }
    ]
  }
]
const router = new VueRouter({
  routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to代表将要访问的路径
  // from代表从哪个路径跳转而来
  // next是一个函数,表示放行
  //    next() 放行   next('/login') 强制跳转到login页面
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

3、代码解释:

  • router.beforeEach用来设置Vue的路由导航守卫(路由拦截),其接收一个回调函数作为参数。

  • 在回调函数内部,接收三个参数,顺序分别是:to , from , next。

  • to代表将要访问的路径

  • from代表从哪个路径跳转而来

  • next是一个函数,表示放行

  • next() => 放行 , next(‘/login’) => 强制跳转到login页面文章来源地址https://www.toymoban.com/news/detail-556186.html

到了这里,关于React/Vue实现路由鉴权/导航守卫/路由拦截的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包