全局路由守卫-登录鉴权

简介: 全局路由守卫-登录鉴权
const router = createRouter({
   
  history,
  routes,
})
router.beforeEach(async (to, from) => {
   
  if (to.path === '/' || to.path.startsWith('/welcome') || to.path.startsWith('/sign_in')) {
   
    return true
  } else {
   
   const path =  await http.get('/me').then(() => true, () => '/sign_in?return_to=' + to.path)
    return true
  }
})

问题1: 上面的代码每次路由跳转的时候都会调用 me 接口
解决方法:如果我们不想每次路由跳转都调用接口我们可以把接口调用写在外面

const promise = http.get('/me')
router.beforeEach(async (to, from) => {
   
  if (to.path === '/' || to.path.startsWith('/welcome') || to.path.startsWith('/sign_in') || to.path.startsWith('/start')) {
   
    return true
  } else {
   
    const path = await promise.then(() => true, () => '/sign_in?return_to=' + to.path)
    return path
  }
})

问题2:上面接口是只调一次了,但是我们登录成功后页面不会跳转
原因:以登录成功后跳转 http://localhost:8082/#/sign_in?return_to=/items/create 为例,我们的 /me 接口依赖 jwt,没登录就没有 jwt,所以一开始我们未登录从 items/create 跳到 sign_in 没问题,但是登录成功后因为我们的 /me 接口只在初始化的时候调用,所以即使我们登录成功这个接口还是走的一开始的 catch 所以还是跳到了登录页
解决方法:在用户登录成功成功后主动去更新

me.tsx

import {
    AxiosResponse } from "axios";
import {
    http } from "./Http";
export let mePromise: Promise<AxiosResponse<{
   
  resource: {
   
    id: number
  }
}>> | undefined

export const refreshMe = () => {
   
  mePromise = http.get<{
    resource: {
    id: number }}>('/me') 
  return mePromise
}

export const fetchMe = refreshMe
signInPage
// 点击登录按钮后
refreshMe()
router.push(returnTo || '/')

main.ts

import {
    mePromise, fetchMe } from './shared/me';

fetchMe()

router.beforeEach(async (to, from) => {
   
  if (to.path === '/' || to.path.startsWith('/welcome') || to.path.startsWith('/sign_in') || to.path.startsWith('/start')) {
   
    return true
  } else {
   
    const path = await mePromise!.then(() => true, () => '/sign_in?return_to=' + to.path)
    return path
  }
})
相关文章
|
10月前
|
JavaScript 数据安全/隐私保护 网络架构
Vue 前置 后置 路由守卫 独享 路由权限控制 自定义属性
Vue 前置 后置 路由守卫 独享 路由权限控制 自定义属性
Yii2.0框架中如何进行路由设置?它支持哪些路由规则?
Yii2.0框架中如何进行路由设置?它支持哪些路由规则?
424 0
全局路由守卫-登录鉴权
全局路由守卫-登录鉴权
|
3月前
|
JavaScript 前端开发 API
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
469 0
|
5月前
|
缓存 JavaScript
【vue】如何搭建拦截器和设置路由守卫(基于token认证)
【vue】如何搭建拦截器和设置路由守卫(基于token认证)
51 0
|
5月前
|
开发框架 前端开发 JavaScript
《Vue3实战》用路由实现跳转登录、退出登录以及路由全局守护
《Vue3实战》用路由实现跳转登录、退出登录以及路由全局守护
|
JavaScript
vue中如果token没有时,路由拦截到登录页
vue中如果token没有时,路由拦截到登录页
142 0
|
前端开发 JavaScript API
React/Vue 实现路由鉴权、导航守卫和路由拦截的优化建议
本文介绍了在 React 和 Vue 中如何实现路由鉴权、导航守卫和路由拦截的方法。路由鉴权是指根据用户权限验证用户是否有权限访问特定的路由页面。导航守卫是在路由切换之前执行的钩子函数,用于控制路由的跳转。路由拦截是在路由处理过程中拦截某些特定路由的行为。本文将介绍 React 和 Vue 中的相关概念和实现方式,并通过示例代码展示如何应用这些概念来实现路由鉴权、导航守卫和路由拦截。
464 2
|
JavaScript
Vue项目配置路由以及设置路由守卫的正确方式(无坑可食用)
Vue项目配置路由以及设置路由守卫的正确方式(无坑可食用)
vue中设置中公共路由和根据权限添加的路由
vue中设置中公共路由和根据权限添加的路由