vue3基础权限设置（简单）

1.app.vue 文件

<template>
<nav v-show="token">
    <ul>
        <li v-for="route in data.routes" :key="route.name">
            <RouterLink :to="route.path">{
  { route.meta.title }}</RouterLink>
        </li>
        <!-- <li>
            <RouterLink to="/shopcar">购物车</RouterLink>
        </li>
        <li>
            <RouterLink to="/mine">个人中心</RouterLink>
        </li> -->
       
    </ul>
</nav>
 <router-view></router-view>
</template>
<script setup>
import { RouterLink,RouterView } from 'vue-router';
import { constom as routes } from '@/router'
import { reactive,ref } from 'vue';
import { getToken } from '@/utils/auth.js'
let data = reactive({
    routes:[...routes]
})

// bug:
// 因为App.vue 是入口主件，第一次打开浏览器时候创建，并且没有销毁。所以TOKEN 是否为响应式也只有执行一次
// 1: vuex /pina + localStorage 持久化存储, App.vue监听 vuex/pina  (推荐)
// 2: 作一个实时监听localStorage 的hooks
let token = ref(getToken())


</script>

<style>

nav li{
    display: inline-block;
    list-style: none;
    margin: 10px;
}
nav a {
    text-decoration: none;
    color: black;
    display: inline-block;
    padding: 25px;
    font-size: 16px;
}

/* 路由高亮展示 */
/* 
router-link-active       被激活的路由才会添加router-link-active 模糊匹配的
router-link-exact-active 精准匹配，只能匹配一个路由
 */
.router-active{
    color: red;
}
</style>

2.api.js 文件配置

import request from './utils/request.js'

export function getCarList(){
    return request({
        url:'/api/sho