需求描述：
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 只有上一页的路由信息，没有更多的路由历史记录
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/152041.html
