新手小白手把手教你构建管理后台vite+vue3--权限控制

2023-11-06 22:03:27

手把手教你构建管理后台vite+vue3--权限控制

登录成功后，获取凭证token

当用户登录成功后，我们需要获取到用户的凭证token。token是一个加密字符串，用于标识用户身份。我们可以通过服务器接口获取到token，并将其存储在本地存储中。
在beforeEach中判断是否获取了权限列表

beforeEach是vue-router的一个钩子函数，它会在每次路由切换之前执行。我们可以利用beforeEach来判断用户是否已经获取了权限列表。如果用户没有获取权限列表，则需要先跳转到登录页面。
使用vueRouter的addRoute挂载

vueRouter提供了addRoute方法，可以动态地添加路由。我们可以使用addRoute方法来挂载权限列表中的路由。这样，用户只有在拥有相应权限的情况下，才能访问对应的路由。

具体实现步骤

安装依赖
```
npm install vite vue vue-router
```
创建项目
```
vite create my-project
```

添加路由

在src/router/index.js中添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

添加权限控制

在src/main.js中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')