(vue3)vite+ts登录后返回上一页或首页实现方法

需求描述:

1、有的页面需要登录后才能访问,未登录时,输入页面路由会自动跳转到登录页,登录成功后再跳回刚才要访问的页面
2、有的页面可以访问,但是点击页面中的某些操作按钮,没有登录的话需要跳到登录页,登陆成功后返回该页面,登录后再点击操作按钮可以进行下一步操作

实现方法

一、在 router 文件下的 “index.ts” 路由配置中添加页面访问权限设置

给路由添加 meta 属性 “requiresAuth”,
如果需要登录后访问- - -“requiresAuth: true”
不需要登录后访问- - -“requiresAuth: false”

代码示例:
index.ts:

routes: [
	{
      path: '/',
      name: 'home',
      component: HomeView,
      meta: {
        title: '首页',
        requiresAuth: false
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login/index.vue'),
      meta: {
        title: '登录',
        requiresAuth: false
      }
    },
    {
      path: '/order',
      name: 'order',
      component: () => import('../views/order/index.vue'),
      meta: {
        title: '我的订单',
        requiresAuth: true
      }
    },
]

二、在 “main.ts” 文件中添加路由守卫

根据路由的 to.meta.requiresAuth 属性值,判断要访问的路由是否需要登录后才可访问,getToken() 是获取 token,登录后服务器端会生成一个 token,需要客户端保存一下该 token 到本地 cookie 中,getToken() 需要自己实现。

代码示例:
main.ts:

import router from './router'

router.beforeEach(async (to: any, from, next) => {
  // 判断是否需要登录后才可访问
  if (to.meta.requiresAuth) {  // 登录后才能访问
    if (!getToken()) { // 没有登录
      next(`/login?redirect=${to.path}`)
    } else { // 已经登录
      next()
    }
  } else {  // 不用登陆就可访问
    if (getToken()) {  // 如果已经登录,访问登录页面的话跳转到首页
      if (to.path == '/login') {
        next({
          path: '/'
        })
      }
    }
    next()
  }
})

三、登录页添加登录后跳转设置

代码示例(伪代码):

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const back = router.options.history.state.back

const redirectUrl = route.query.redirect
const redirectUrlStr = ref('')
if (redirectUrl) {
  redirectUrlStr.value = redirectUrl.toString()
}

// 调用登录接口 、、、(根据实际操作编写代码)
if(登陆成功) {
	// 返回上一页或者首页
    if (redirectUrl) {
      router.replace({ path: redirectUrlStr.value })
    } else if (back) {
      router.go(-1)
    } else {
      router.replace({ path: '/' })
    }
}

注意事项:

1、如果登录成功后,使用的 router.push() 返回上一页,回到登陆前的上一页后,再点击浏览器的“返回上一页” 箭头,返回的是去登录页,而不是 要登录才可以访问的页面的前一页

2、如果没有登录时浏览器中直接输入要登录后才可以访问的页面 a 路由,会跳转到登录页,但登录页 的 “router.options.history.state.back” 中没有 记录到是由 路由a 跳转到登录页的;
如果是访问一个不用登陆可以访问的页面 b,在该页面进行具体操作按钮,才跳出登陆页,此时登录页的 “router.options.history.state.back” 中会有 该 页面 b 的路由信息

3、router.options.history.state.back 只有上一页的路由信息,没有更多的路由历史记录

你可能感兴趣的:(vite,vue,前端,前端,vue.js)