vue3中路由权限

小冯吃饱了~

已于 2023-06-26 10:10:13 修改

阅读量369

点赞数

文章标签：前端数学建模

于 2023-06-17 09:47:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_71893751/article/details/131257060

版权

文章展示了如何在Vue3应用中实现前端路由的权限守卫，确保未登录用户不能访问特定页面，并介绍了如何设置Axios的请求和响应拦截器，用于处理请求头中的token以及错误处理。同时，文章还演示了动态渲染菜单侧边栏的递归组件实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue3-前端路由守卫（不登陆不可访问）

// 前置路由守卫
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isLogin) {
    next('/')
  } else {
    next()
  }
})

2、vue3-axios请求拦截器（使用时，引入到文件中即可）

import axios from 'axios';

let app = axios.create({
    baseURL: 'http://127.0.0.1:3000',
    timeout: 10000,
});
// 添加请求拦截器
app.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        let token = window.localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = token;
            
        }
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    },
);

// 添加响应拦截器
app.interceptors.response.use(
    function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response;
    },
    function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error);
    },
);
export default app;

3、菜单侧边栏渲染

<!-- 父组件 -->
<el-menu
   unique-opened
   router
   :default-active="act_menu"
   class="el-menu-vertical-demo"
   @select="xuan">
       <template v-for="one in menus.menulist" :key="one._id">
         <MenuItem :item="one"> </MenuItem>   // 子组件
       </template>
</el-menu>

<!-- import MenuItem from "../components/menuItem.vue"; -->

<!-- 子组件内容（递归写法） -->

<template>
    <el-menu-item v-if="item.children==undefined || item.children.length === 0" :index="item.powerUrl">
        {{ item.powerName }}
    </el-menu-item>
    <el-sub-menu v-else :index="item._id">
        <template #title>{{ item.powerName }}</template>
        <MenuVue v-for="it in item.children" :key="it._id" :item="it"></MenuVue>
    </el-sub-menu>
</template>

<script setup>
import MenuVue from './menuItem.vue'
import { defineProps } from 'vue';
const props = defineProps({
    item: {
        type: Object
    }
});

</script>

<style scoped></style>