vite+ts+mock+vue-router+pinia实现vue的路由权限

已于 2024-05-22 10:32:04 修改
阅读量493 收藏 3
点赞数 10
分类专栏： vue 文章标签： vue.js javascript ecmascript
于 2024-05-20 17:02:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beekim/article/details/139068494
版权

0.权限管理

前端的权限管理主要分为如下：

  • 接口权限
  • 路由权限
  • 菜单权限
  • 按钮权限

权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源

1.项目搭建

创建vite项目

yarn create vite

配置别名

npm install path --save

npm install @types/node --save-dev

tsconfig.json
在这里插入图片描述

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["./src/components/*"]
    },

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 配置路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
  plugins: [
    vue(),
  ]
  
})

创建基础路由

npm i vue-router@4

const routes = [
    {
      name: "Home",
      path: "/",
      component: () => import("@/views/Home.vue"),
    },
   
  ];
  export default routes; //导出
  

import { createRouter, createWebHistory } from "vue-router";
import routes from "./router";

const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;


import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app =createApp(App)
app.use(router)
app.mount('#app')

<script setup lang="ts">
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

配置mock

yarn add mockjs vite-plugin-mock -D

import { MockMethod } from 'vite-plugin-mock';
export default [
  {
    url: `/api/list`,
    method: 'get',
    response: () => {
      return [{
 			 name:'tom',
 			 age:16,
 			 nation:'USA'
			}];
    },
  },
 
] as MockMethod[];

vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 配置路径别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
  plugins: [
    vue(),
    viteMockServe({
	    mockPath: './src/mock'
	  })
  ]
})

使用

<script setup lang="ts">
import axios from 'axios';

axios.get('/api/list').then(res=>{
    console.log(res.data);

})
</script>

<template>
<h1>超市管理系统首页</h1>

</template>

<style scoped>

</style>

在这里插入图片描述

安装pinia

yarn add pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
const pinia = createPinia()


const app =createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')


import { defineStore } from 'pinia'

export const useMarkStore = defineStore('mark', {
    state: () => ({ count: 0 }),
    getters: {
      double: (state) => state.count * 2,
    },
    actions: {
      increment() {
        this.count++
      },
    },
})


<script setup lang="ts">
import { useMarkStore } from '@/store/store';
import axios from 'axios';

const store= useMarkStore()
axios.get('/api/list').then(res=>{
    console.log(res.data);

})
</script>

<template>
<h1>超市管理系统首页</h1>
<h1>{{ store.count }}</h1>

</template>

<style scoped>

</style>

在这里插入图片描述

安装js-cookie插件

yarn add js-cookie

2.路由权限（包括菜单权限和按钮权限）

目录结构：
在这里插入图片描述

mock

import { MockMethod } from "vite-plugin-mock";
export default [
  {
    url: `/api/list`,
    method: "post",
    response: ({ body }) => {
      return body;
    },
  },
  {
    url: `/api/login`, //登录逻辑
    method: "post",
    response: ({ body }) => {
      let data = {};
      if (body.username == "tom") {
        data = {
          id: "1111",
          token: "4566adasdqfrqwd",
        };
      } else if (body.username == "amy") {
        data = {
          id: "222",
          token: "45184adaczz52za",
        };
      }
      return data;
    },
  },
  {
    url: `/api/getRoutes`, //简单方案：根据用户返回不同路由，真实后端逻辑：根据登录用户的角色去表里查授权该角色的的菜单
    method: "post",
    response: ({ body }) => {
      console.log(body);
      const routes = [];
      if (body.id == "1111") {
        routes.push(
          {
            name: "page1",
            path: "/page1",
            component: "/Page1.vue",
          },
          {
            name: "page2",
            path: "/page2",
            component: "/Page2.vue",
          }
        );
      } else if (body.id == "222") {
        routes.push( {
          name: "page3",
          path: "/page3",
          component: "/Page3.vue",
        });
      }
      return routes;
    },
  },
] as MockMethod[];

router

在这里插入图片描述

store

import { defineStore } from "pinia";
import Cookies from "js-cookie";
import axios from "axios";
import routes from '@/router/router'
const modules = import.meta.glob("../views/**/*.vue");

export const useMarkStore = defineStore("mark", {
  state: () => ({
    pageRoutes: <any>[], //当前页面缓存路由
    asyncRoutes: <any>[],//从接口获取到的路由数组
  }),
  getters: {
  },
  actions: {
    SET_ROUTES(_routes: any[]){
    //设置state中的值
        this.$state.asyncRoutes=_routes
        this.$state.pageRoutes=routes.concat(_routes)

    },
    getRouter() {
    //从后端接口获取到动态路由
      let _id = Cookies.get("id");
      if (_id) {
        return new Promise((resolve, reject) => {
          axios.post("/api/getRoutes", { id: _id }).then((res) => {
            console.log(res);
            let _data = res.data;
            let newData = this.parseRouter(_data);
            this.SET_ROUTES(newData)
            resolve(newData);
          });
        });
      }
    },
    parseRouter(_data: Array<any>) {
      //处理后端返回的路由数据=》vite项目能解析的路由格式
      let _newArr: Array<any> = [];
      _data.forEach((item: any) => {
        let newItem = Object.assign({}, item);
        let comp = item.component;

        newItem.component = modules[`../views${comp}`];
        _newArr.push(newItem);
      });
      return _newArr;
    },
  },
  getButtonCode(){
    //按钮权限思路：
    //1.在登录的时候拉取按钮权限编码code['EXPORT_LIST','OPEN_MODAL']
    //2.将编码缓存本地
    //3.页面通过v-if控制按钮或是自义定指令控制按钮

  }
});

permission.ts

import router from "@/router";
import { useMarkStore } from "@/store/store";
import Cookies from "js-cookie";


//获取view下所有的vue文件
// const modules = import.meta.glob('../views/**/*.vue')


//   export const getCurrRoutes=(name:string)=>{

//   }

// await axios.post('/api/getRoutes',{username:'tom'}).then(res=>{
//     console.log(res);
//     let _data=res.data
//     _data.forEach((item:any)=>{
//         let newItem=Object.assign({},item)
//         let comp=item.component

//         newItem.component=modules[`../views${comp}`]
//         router.addRoute(newItem)
//     })

// })
//白名单
const whiteList=['/about','/new','/login']

//路由守卫
router.beforeEach(async(to,from,next)=>{
    const store= useMarkStore()

    const token=Cookies.get("token")
    console.log(token);
   
    if(token){
        if(to.path=='login'){
            next('/')
        }else{
            //判断是否拿了路由规则
            if(store.asyncRoutes.length==0){
                //格式化好的路由
              const _temp:any=  await store.getRouter()
              _temp.forEach((item:any)=>router.addRoute(item))
              //继续跳转
              next(to.path)

            }else{
                if(to.matched.length!=0){
                    next()
                }else{
                    alert('无页面权限')
                    next(from.path)
                }
            }
        }
    }else{
        if(whiteList.indexOf(to.path)!= -1){
            next()
        }else{
            next('/login')
        }
        
    }
})

Login.vue

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import Cookies from 'js-cookie'
import { useRouter } from 'vue-router';
const router =useRouter()
const username=ref()

const login=()=>{
    axios.post('/api/login',{username:username.value}).then(res=>{
    console.log(res);
    if(res.data.token){
        Cookies.set('token',res.data.token)
        Cookies.set('id',res.data.id)
        router.push('/')
    }

})  
  axios.post('/api/getRoutes',{username:username.value}).then(res=>{
    console.log(res);

})
}
</script>

<template>
<h1>登录</h1>
<div>用户名：<input type="text" v-model="username"></div>
<button @click="login">登录</button>

</template>

<style scoped>

</style>

Home.vue

<script setup lang="ts">
import { useMarkStore } from '@/store/store';
import axios from 'axios';
import Cookies from 'js-cookie'

const store= useMarkStore()
axios.post('/api/list',{params:{name:'aaa'}}).then(res=>{
    console.log(res);

})

import { useRouter } from 'vue-router';
const router =useRouter()
const loginout=()=>{
    Cookies.remove('token')
    Cookies.remove('id')
    router.push('/login')
}

</script>

<template>
    <div @click="loginout">登出</div>
<h1>超市管理系统首页</h1>
<div>当前用户{{  }}</div>
<div>当前用户可用菜单：</div>
<div v-if="store.asyncRoutes" style="display: flex;flex-direction: column;" >
    <a v-for="item in store.asyncRoutes" :href="item.path">{{ item?.name }}</a>
</div>

</template>

<style scoped>

</style>

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import  '@/util/permission'
const pinia = createPinia()

const app =createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

按钮权限思路

 getButtonCode(){
    //按钮权限思路：
    //1.在登录的时候拉取按钮权限编码code['EXPORT_LIST','OPEN_MODAL']
    //2.将编码缓存本地
    //3.页面通过v-if控制按钮或是自义定指令控制按钮

  }

前端控制权限

//1.在路由配置中配置白名单
{
   name: "Login",
   path: "/login",
   component: () => import("@/views/Login.vue"),
   meta:{
		whiteList:['admin','tom']
	}
 },
 //2.在路由守卫beforeEach中判断当前用户角色是否在meta中，是就next()

效果

在这里插入图片描述
tom登录
在这里插入图片描述
amy登录

在这里插入图片描述

3.接口权限

登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token

axios.interceptors.request.use(config => {
    config.headers['token'] = cookie.get('token')
    return config
})
axios.interceptors.response.use(res=>{},{response}=>{
    if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误
        router.push('/login')
    }
})

4.注意点

mock


const login=()=>{//这里传参有三种方式：data,params,{}
    axios.post('/api/login',{username:'tom'}).then(res=>{
    console.log(res);

}) 

import { MockMethod } from "vite-plugin-mock";
export default [
  {
    url: `/api/login`, //登录逻辑
    method: "post",
    response: ({ body }) => {//获取传的参数使用body
      return body;
    },
  },
 
] as MockMethod[];

addRoute

动态添加路由在vite中不能使用以下方法：

// 路由拼接
function loadView(view:string) {
    return () => import(`@/views/${view}`)
}

上面的代码会报错：TypeError: Failed to resolve module specifier，应该采用import.meta.glob方式

import router from "@/router";
import axios from "axios";
//获取view下所有的vue文件
const modules = import.meta.glob('../views/**/*.vue')

//这里需要将异步获取的值改为同步
await axios.post('/api/getRoutes',{username:'tom'}).then(res=>{
    console.log(res);
    let _data=res.data
    _data.forEach((item:any)=>{
        let newItem=Object.assign({},item)
        let comp=item.component
        newItem.component=modules[`../views${comp}`]
        router.addRoute(newItem)
    })

})

5.源码地址

https://gitee.com/beekim/vue-route-mgr

参考：
https://cloud.tencent.com/developer/article/1794300
https://github.com/vitejs/vite/discussions/2746
https://blog.csdn.net/lucklymm/article/details/125420877
https://blog.csdn.net/weixin_43239880/article/details/129922664
https://blog.csdn.net/qq_36651686/article/details/116520731

键.
关注
专栏目录
vue3+ts+vite使用mock数据
周家大小姐
02-29 1078
接口使用(我这里是写的axios封装,你们根据自己当前需求)vite.config.ts文件配置。在根路径下创建mock文件夹。
vite2.0+vue3.0+vuex+vue-router4+typescript+less 从0搭建项目
能
05-15 738
环境准备 node版本12.0.0以上 一：先使用vite搭建项目 1.命令行输入 npm init@vitejs/app 选择 vue 和 typescript 键入这三个命令 安装基础包 成功 二.接下来修改成自己习惯的项目架构 1.首先搭建vue-router 架构， 先安装vue-router依赖 less 依赖 在src 目录下 新建views 文件夹 这里包含所有页面结构 views目录下 新建 Index目录， 这里是首页，新建三个文件in..
vite结合ts使用mock模拟数据，实现前后端异步开发
Michael_Hzs的博客
02-17 1316
vite结合ts，vue3 使用mock模拟数据，实现前后端异步开发
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
最新发布
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
09-03 4617
Mock 可以翻译为“模拟”，在前端开发中通常指模拟后端接口和数据。在软件开发过程中，Mock数据指的是一种虚拟的测试数据，用于模拟真实的数据情况。它可以用来替代真实的数据源，从而实现在没有真实数据的情况下进行开发和测试的需求。Mock数据的使用不仅可以提高开发效率，还可以避免与真实数据源的依赖性，减少开发过程中的等待时间，以及降低测试环境的复杂性。
vue3+ts+vite项目中mock数据
qq_38902432的博客
07-20 832
1、安装vite-plugin-mock插件依赖,此插件依赖mockjs ,所以同时要安装上。2、在vite.config.ts中配置相关插件。3、在项目根目录下创建名为mock的文件夹。5、使用axios测试。
vite-plugin-mock:vite.use模拟插件的模拟插件
05-16
Vite-plugin-mock English | 提供本地和产品模拟服务。 一个基于vite的模拟插件，它是基于Mockjs开发的。 并同时支持本地环境和生产环境。 Connect服务中间件在本地使用，mockjs在线使用 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add mockjs # or npm i mockjs -S yarn add vite-plugin-mock -D # or npm i vite-plugin-mock -D 例子 运行示例 # ts example cd ./examples/ts-examples yarn install yarn serve # js example cd ./examples/js-examples yarn install yarn serve 用法 开
vue3+vite+pinia+axios+mock+ElementPlus：登录，动态路由，存储，网络 js非ts纯前端
09-25
动态路由（Dynamic Routing）是前端路由管理的重要特性，Vue Router允许根据不同的URL匹配不同的组件，实现页面的动态加载。在Vue3中，可以通过`router.addRoute`或`router.deleteRoute`等方法动态添加或删除路由，...
vite-vue-ts精简模版集成pinia+svg+router+@src
03-22
【标题】"vite-vue-ts精简模版集成pinia+svg+router+@src"是一个基于Vite、Vue.js 3、TypeScript、Pinia、SVG图标库、Vue Router和自定义`@src`目录结构的项目模板。这个模板提供了一个高效且功能完备的开发环境，...
Vite + Vue3 + Ts + Router 路由
qq_33365152的博客
08-29 299
Vue3 + vite + Ts + Router 简单嵌套路由
Vue3 Vite4 ElementPlus TS模板(含Vue-Router4+Pinia4)
LeoForBest的博客
06-06 2051
手动安装配置Vue3 ElementPlus模板比较繁琐，网上寻找一些模板不太符合自己预期，因此花点精力搭建一个符合自己需求的架子。 满足自己以下功能 - Vite工具热启动速度快，修改后编译时间短（个人喜好） - element-plus 组件丰富，适合快速开发 - 基本路由功能（vue-router官方推荐，配置也较简单） - vite-plugin-mock，方便快速模拟接口返回数据，这个功能比较方便
Vue-Router4 + Pinia 动态权限路由设置
weixin_50828774的博客
10-27 490
我开心的登录来到我的主页，却发现只有静态路由在那，我输出了下router，发现确实没有，难道是我获取动态路由那步有问题？打开vue-devtools再走一遍，发现跳转到主页时是已经添加到路由里面去了的，用hasRoute方法来确定我的动态路由确实是添加上去了的，但是却没有相关信息的展示，options里的信息并没有变化。在Store文件夹下有个user的文件，里面是用pinia生成的一个userStore，放着登录、登出、获取用户信息、获取动态路由信息的方法和一些变量；，将其作为一个已有路由的子路由"
vue3-vite-pinia模板
qq_18827959的博客
07-10 389
模板
Pinia+Route
qq_45897636的博客
10-02 1912
pinia和route的基本使用
vue + vite + js 后台管理系统：权限控制+路由/菜单动态加载
buchibingqilin的博客
08-18 1996
动态路由影响整个项目的运行，弄清楚整体流程十分重要。在权限控制中还有颗粒度粗细之分，更详细的内容后续再进行补充吧。
Vue3动态路由（Vite+Vue3+TS+Mock）
热门推荐
XUMENGCAS的博客
11-25 2万+
vue3动态路由的配置。
Vite + pinia+ ts +vue3 + vue-routes 笔记
琼楼玉宇
03-17 1170
1、 按照官方笔记，我需要修改下。 // 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component:
vite + vue3 + setup + pinia + ts 项目实战
qq_46416934的博客
03-09 1355
介绍 一个使用 vite + vue3 + pinia + ant-design-vue + typescript 完整技术路线开发的项目，秒级开发更新启动、新的vue3 composition api 结合 setup纵享丝滑般的开发体验、全新的 pinia状态管理器和优秀的设计体验（1k的size）、antd无障碍过渡使用UI组件库 ant-design-vue、安全高效的 typescript类型支持、代码规范验证、多级别的权限管理~ 前言 前两天接到了一个需求，就是把原来的一个项目的主要功能模块和用
在vite+ vue3环境中使用mock接口数据
A_bad_boy_hahaha的博客
06-29 1387
vue3 Mock数据
vite+vue3中使用mock模拟数据
liguoyuan819的博客
05-14 6052
1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置vite-plugin-mock使用方式 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { viteMockServe } from 'vite-plugin-mock' // https://vitej
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值