fix: 优化权限路由

src/assets/style/index.scss

@@ -1,5 +1,5 @@
-@import "./variable.scss";
-@import "./mixin.scss";
+@use "./variable.scss";
+@use "./mixin.scss";
 
 @tailwind base;
 @tailwind components;

src/main.js

@@ -5,6 +5,7 @@ import App from '@/App.vue';
 import router from '@/router';
 import { userAPI } from '@/api';
 import { checkRes } from '@/utils/helpers';
+import '@/assets/style/index.scss';
 
 async function getUserInfo() {
   const userRes = await userAPI.info();

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from '@/views/Home.vue';
 import Sign from '@/views/Sign.vue';
+import About from '@/views/About.vue';
 import { ROLE } from '@/constant';
 
 const ADMIN = [ROLE.ADMIN];
@@ -18,6 +19,11 @@ const routes = [
     name: 'Sign',
     component: Sign,
   },
+  {
+    path: '/about',
+    name: 'About',
+    component: About,
+  },
   {
     path: '/chat',
     name: 'Chat',
@@ -42,14 +48,14 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
+  const { meta } = to;
   const userInfo = router.$user;
-  if (to.name !== 'Sign' && !userInfo) {
+  if ((meta && meta.role) && !userInfo) {
     next({
       name: 'Sign',
     });
   }
   if (userInfo) {
-    const { meta } = to;
     if (meta && meta.role) {
       if (meta.role.indexOf(userInfo.role) === -1) {
         router.push({

src/views/About.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="about">
+    About Page
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'About',
+};
+</script>

vite.config.js

@@ -24,7 +24,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: '@use "@/assets/style/index.scss" as *;',
+        additionalData: '@use "@/assets/style/mixin.scss" as *;\n@use "@/assets/style/variable.scss" as *;',
       },
     },
   },