1. Python技术站首页
  2. 其他
  3. Vue

vue-element-admin 登陆及目录权限控制的实现

• Vue
yizhihongxing

下面为你详细讲解“vue-element-admin 登陆及目录权限控制的实现”的完整攻略。

1. 登陆流程

要实现登陆流程，首先需要安装相关依赖包：

npm install axios js-cookie

其中，axios 是一个基于 Promise 的 HTTP 库，可用于浏览器和 Node.js，同时也是 Vue 官方推荐的 HTTP 请求库；js-cookie 则是操作 cookie 的一个简单 js 库。

接下来，依据 vue-element-admin 的代码示例，在 src/utils/request.js 中添加如下代码：

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (getToken()) {
      // set request header
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.msg || 'Error',
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

以上代码完成了 http 请求拦截器的实现，可将 token 添加到 header 中，同时，还对 http 响应增加了异常处理，如 token 过期等。

然后在 src/utils/auth.js 文件中，实现对 token 的存储和获取：

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

以上代码即实现了对 cookie 的存取操作。

最后在 src/api/user.js 文件中添加如下代码：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

完整的登陆流程代码实现请移步vue-element-admin 官方文档的“登陆”一章节。

2. 目录权限控制

实现菜单目录的权限控制，主要有两个步骤：

  1. 在动态路由筛选中，将路由标记为 hidden: true，表明该路由不会在菜单栏中显示。
export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor']
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'Page Permission',
          roles: ['admin']
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          title: 'Directive Permission'
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'Role Permission',
          roles: ['admin']
        }
      }
      {
        path: 'hidden-example',
        component: () => import('@/views/example/hidden'),
        name: 'HiddenExample',
        meta: {
          title: 'Hidden Example',
          roles: ['admin']
          hidden: true
        }
      },
    ]
  },

  { path: '*', redirect: '/404', hidden: true }
]
  1. 以角色为基础，在后端接口校验该角色是否有权限访问该路由，若有，则返回该路由进行显示。

完整的前端菜单权限控制代码实现请移步vue-element-admin 官方文档的“菜单和路由权限控制”一章节。

示例

下面提供两个关于该过程的代码示例。一个是添加路由菜单中的隐藏示例，另一个是后端接口校验中的角色权限示例。

添加路由菜单隐藏示例

在添加路由菜单时传入参数 hidden: true，表示此菜单路由不显示。此处举例的路由路径为 /hidden-example。

import Layout from '@/layout'

export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor']
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'Page Permission',
          roles: ['admin']
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          title: 'Directive Permission'
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'Role Permission',
          roles: ['admin']
        }
      }
      {
        path: 'hidden-example',
        component: () => import('@/views/example/hidden'),
        name: 'HiddenExample',
        meta: {
          title: 'Hidden Example',
          roles: ['admin']
          hidden: true
        }
      },
    ]
  },

  { path: '*', redirect: '/404', hidden: true }
]

在 src/views/example 目录下新建 hidden.vue 文件，并添加以下代码：

<template>
  <div class="hidden-example">
    <h1>This is a Hidden Example</h1>
    <p>If you can see this, it means you have permission for this hidden example.</p>
  </div>
</template>

后端接口角色权限示例

在前端调用后端接口时，根据后端传回的数据，判断当前用户是否有权限进行操作。此处以 axios 为例，展示一个角色权限的请求示例。

在 src/api/example.js 文件中，添加以下代码：

import request from '@/utils/request'

export function exampleAPI() {
  return request({
    url: '/example',
    method: 'get'
  })
}

export function adminOnlyAPI() {
  return request({
    url: '/admin-only',
    method: 'get',
    params: {
      role: 'admin'
    }
  })
}

export function editorOnlyAPI() {
  return request({
    url: '/editor-only',
    method: 'get',
    params: {
      role: 'editor'
    }
  })
}

以上代码定义了三个请求 API，其中 exampleAPI 可不做权限判断；adminOnlyAPI 可以被 admin 角色访问，而 editorOnlyAPI 可以被 editor 角色访问。访问后端接口时，在请求成功后，根据返回数据判断当前用户是否有权限进行操作。

以上就是“vue-element-admin 登陆及目录权限控制的实现”的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-element-admin 登陆及目录权限控制的实现 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue3使用vuex实现页面实时更新数据实例教程(setup)

    下面是详细讲解“vue3使用vuex实现页面实时更新数据实例教程(setup)”的完整攻略。 一、什么是Vuex Vuex是一个专为Vue.js设计的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex中包含了：state，mutations，actions，getters和modules等模块。其…

    Vue 2023年5月27日
    00

  • vue.js打包之后可能会遇到的坑！

    首先我们先来了解一下什么是Vue.js的打包。 Vue.js作为一种流行的前端框架，我们在进行开发的时候，通常会使用到Webpack等打包工具来将多个页面或组件打包压缩成一个或多个文件，以减小页面加载时间。但是，在打包之后，我们可能会遇到以下坑点： 页面空白或组件不显示 这个问题通常出现在打包后的页面中，大部分情况下是因为打包工具将.vue文件中的css或s…

    Vue 2023年5月28日
    00

  • Vue打包后访问静态资源路径问题

    Vue是一种流行的JavaScript框架，用于构建交互式的现代Web应用程序。Vue的打包可以将应用程序的所有资源（例如HTML，JavaScript，CSS和图像）打包成几个文件，使应用程序易于部署。但是，Vue打包后，用户在访问应用程序时可能会遇到静态资源路径问题。为解决这一问题，我们可以采用以下攻略： 问题描述 Vue打包后，由于路径设置不正确，可能…

    Vue 2023年5月28日
    00

  • ant design vue 表格table 默认勾选几项的操作

    Ant Design Vue 表格（Table）默认勾选几项的操作，可以通过在表格数据中为需要默认勾选的行数据添加一个 selected 属性，并且在表格操作栏添加一个全选按钮，并将其与表格的 rowSelection 属性绑定起来即可实现。 以下是完整的实现步骤： 设置表格数据源 首先，需要设置表格的数据源，可以使用一个数组对象来模拟，示例代码如下： da…

    Vue 2023年5月28日
    00

  • vue v-model的用法解析

    Vue v-model的用法解析 Vue.js是目前非常流行的一款前端框架，而v-model是Vue.js中非常重要的一种指令，本文将详细讲解其用法。 v-model指令的基本用法 v-model是Vue.js中用来实现双向数据绑定的指令，通过它可以轻松地实现数据的修改和响应。 v-model的使用方式很简单，只需要在表单元素上添加v-model指令，并将其…

    Vue 2023年5月27日
    00

  • vue 页面回退mounted函数不执行的解决方案

    1.问题描述 当 Vue 页面回退时，如果使用了 keep-alive 组件进行缓存，再次进入该页面时，mounted 钩子函数不会执行。这是因为使用了 keep-alive 缓存组件，导致页面并未被销毁，因此再次进入页面时不会触发 mounted 钩子函数。 2.解决方案 方法一：使用 activated 钩子函数 当使用缓存组件时，在页面再次进入前会触发…

    Vue 2023年5月28日
    00

  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    下面我将为你分享如何去除富文本中的html标签及vue、react、微信小程序中的过滤器的攻略。 去除富文本中的html标签 方法一：使用正则表达式 在 JavaScript 中，我们可以使用正则表达式来去除富文本中的 html 标签。具体实现代码如下： function removeHTMLTag(str) { str = str.replace(/&lt…

    Vue 2023年5月27日
    00

  • vue实现公共方法抽离

    下面是“Vue实现公共方法抽离”的完整攻略，其中包含两个示例。 1. 需求背景 在Vue项目中，有一些公共方法会被多个组件共用，为了避免代码冗余，我们需要将这些公共方法抽离出来，然后挂载到Vue的prototype上，以便全局调用。 2. 具体实现步骤 2.1 抽离公共方法 将多个组件中共用的方法，抽离出来，建议以模块化的方式管理。下面是一个示例，假设我们将…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部