下面为你详细讲解“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. 目录权限控制
实现菜单目录的权限控制，主要有两个步骤：
- 在动态路由筛选中，将路由标记为 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 }
]
- 以角色为基础，在后端接口校验该角色是否有权限访问该路由，若有，则返回该路由进行显示。
完整的前端菜单权限控制代码实现请移步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技术站
微信扫一扫 
支付宝扫一扫 