Vue+Vue-Router+路由守卫实现路由鉴权功能实战

2023-09-13 09:22:19

使用 Vue 和 Vue-Router 实现路由鉴权

1. 安装 Vue 和 Vue-Router

首先，使用 npm 安装 Vue 和 Vue-Router：

npm install vue vue-router

2. 创建 Vue 实例

接下来，创建一个 Vue 实例并配置路由器：

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/404', component: NotFound }
  ]
})

const app = new Vue({
  router
}).$mount('#app')

3. 创建路由守卫

为了检查用户是否已登录，我们创建一个路由守卫：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

4. 实现 404 页面

为了处理不存在的页面，我们创建一个 404 组件：

import Vue from 'vue'

const NotFound = {
  template: `
    <div>
      <h1>404 Not Found</h1>
    </div>
  `
}

export default NotFound

5. 自研 El-Button

为了自定义按钮样式，我们可以自研一个 El-Button 组件：

import Vue from 'vue'

const ElButton = {
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  template: `
    <button
      type="button"
      :class="['el-button', 'el-button--' + type, 'el-button--' + size]"
    >
      <slot />
    </button>
  `
}

export default ElButton