这是一个基于Vue.js的前端路由权限控制和用户认证的逻辑实现，主要功能包括：
-
路由守卫：通过
router.beforeEach和router.afterEach钩子函数，控制用户在访问不同页面时的权限验证和页面跳转。 -
钉钉应用内免登：通过钉钉的JSAPI实现应用内免登录功能。
-
NProgress进度条：在页面跳转时显示进度条，提升用户体验。
-
动态路由生成：根据用户角色动态生成路由，实现权限控制。
下面我们将详细分析代码的各个部分。
1. 依赖导入
import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import getPageTitle from '@/utils/get-page-title'
import dd from 'dingtalk-jsapi'-
router：Vue Router实例，用于管理前端路由。 -
store：Vuex Store实例，用于全局状态管理。 -
NProgress：用于在页面跳转时显示进度条。 -
getToken：从本地存储中获取用户的登录凭证（Token）。 -
getPageTitle：根据路由的meta信息生成页面标题。 -
dd：钉钉的JSAPI，用于在钉钉应用内实现免登录功能。
2. NProgress配置
NProgress.configure({ showSpinner: false }) // 关闭进度条的旋转动画
-
NProgress：用于在页面跳转时显示进度条，提升用户体验。 -
showSpinner: false：关闭进度条的旋转动画，简化UI。
3. 白名单和钉钉企业ID
const whiteList = ['/login', '/auth-redirect'] // 不需要重定向的白名单
const corpId = 'xxxxxxxxx' // 钉钉企业ID-
whiteList：定义不需要登录即可访问的路由路径，如登录页和授权重定向页。 -
corpId：钉钉企业的唯一标识，用于钉钉免登功能。
4. 钉钉应用内免登
const initInDingTalkLogin = () => {
dd.ready(function() {
dd.runtime.permission.requestAuthCode({
corpId: corpId,
onSuccess: function(info) {
let code = info.code // 免登授权码
let state = _getRandomString(10)
store.dispatch('user/DDLogin', { code, state }).then(() => {
router.push({ path: '/' })
})
},
onFail: function(msg) {
dd.device.notification.toast({
icon: 'error',
text: `${msg}`,
duration: 3,
delay: 0
})
}
})
})
}
-
initInDingTalkLogin：在钉钉应用内实现免登录功能。-
dd.ready：钉钉JSAPI初始化完成后执行。 -
dd.runtime.permission.requestAuthCode：请求免登授权码。 -
onSuccess：获取授权码成功后，调用Vuex的DDLoginaction进行登录，并跳转到首页。 -
onFail：获取授权码失败时，显示错误提示。
-
5. 生成随机字符串
const _getRandomString = (len) => {
len = len || 10
let $chars = 'ABCDEFGHIJKMNOPQRSTUVWXYZ' // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
let maxPos = $chars.length
let pwd = ''
for (var i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
-
_getRandomString：生成指定长度的随机字符串，用于免登流程中的state参数。
6. 路由守卫
router.beforeEach(async(to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
const { roles } = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', { roles })
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
next(`/login`)
NProgress.done()
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1 || to.path.indexOf('/share') === 0) {
next()
} else {
const isDingTalk = window.navigator.userAgent.includes('DingTalk')
if (isDingTalk) {
initInDingTalkLogin()
} else {
next(`/login`)
}
NProgress.done()
}
}
})-
router.beforeEach：在每次路由跳转前执行。-
NProgress.start()：启动进度条。 -
document.title：根据路由的meta信息设置页面标题。 -
hasToken：检查用户是否已登录（是否有Token）。-
如果已登录：
-
如果访问的是登录页，则重定向到首页。
-
否则，检查用户角色信息：
-
如果已有角色信息，则放行。
-
如果没有角色信息，则调用
getInfo获取用户信息，并动态生成路由。
-
-
-
如果未登录：
-
如果访问的是白名单中的路径或分享页，则放行。
-
否则，检查是否在钉钉应用内：
-
如果是，则调用
initInDingTalkLogin进行免登。 -
如果不是，则重定向到登录页。
-
-
-
-
7. 路由跳转完成后
router.afterEach(() => {
NProgress.done()
})总结
这段代码实现了一个完整的前端权限控制和用户认证流程，主要包括以下功能：
-
路由守卫：通过
router.beforeEach和router.afterEach实现页面跳转的权限控制和进度条显示。 -
钉钉免登：通过钉钉JSAPI实现应用内免登录功能。
-
动态路由生成：根据用户角色动态生成路由，实现细粒度的权限控制。
-
白名单机制：允许某些页面（如登录页）无需登录即可访问。
通过这段代码，开发者可以实现一个安全、灵活且用户体验良好的前端权限管理系统。
完整代码如下：
import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import getPageTitle from '@/utils/get-page-title'
import dd from 'dingtalk-jsapi'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
const corpId = 'xxxxxxxxx'
// 钉钉应用内免登
const initInDingTalkLogin = () => {
dd.ready(function() {
dd.runtime.permission.requestAuthCode({
corpId: corpId,
onSuccess: function(info) {
let code = info.code // 免登授权码
let state = _getRandomString(10)
store.dispatch('user/DDLogin', { code, state }).then(() => {
router.push({ path: '/' })
})
},
onFail: function(msg) {
dd.device.notification.toast({
icon: 'error', //icon样式，不同客户端参数不同，请参考参数说明
text: `${msg}`, //提示信息
duration: 3, //显示持续时间，单位秒，默认按系统规范[android只有两种(<=2s >2s)]
delay: 0 //延迟显示，单位秒，默认0
})
}
})
})
}
const _getRandomString = (len) => {
len = len || 10
let $chars = 'ABCDEFGHIJKMNOPQRSTUVWXYZ' // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
let maxPos = $chars.length
let pwd = ''
for (var i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
router.beforeEach(async(to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
const { roles } = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', { roles })
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
next(`/login`)
NProgress.done()
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1 || to.path.indexOf('/share') === 0) {
next()
} else {
const isDingTalk = window.navigator.userAgent.includes('DingTalk')
if (isDingTalk) {
initInDingTalkLogin()
} else {
next(`/login`)
}
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done()
})
vue中的权限控制和钉钉消息跳转免登，结合了vue router的路由守卫和系统角色，且在此方法中添加了钉钉消息跳转钉钉pc端的免登功能
扫一扫
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
