1.ルーティングと権限の検証
- ルーティングと権限の検証、参加プロジェクトでルーティングと権限のマッピングを処理する方法は?
- ルーティング処理ロジックの分析は次のとおりです。
- アクセス
/xxx
は、裁判官が存在することを取得することrouter.beforeEach
から、グローバルナビゲーションガードを作ります。cookie
token
token
token
存在しない場合は、ホワイトリストのルートかどうかが判断されます。ホワイトリストに含まれている場合は、ルートにアクセスします/xxx
。ホワイトリストにない場合は、ルートにアクセスします/login?redirect=/xxx
。
- ある場合
token
は、ルートかどうかを判断します/login
。ルートがyesの場合は/login
、にリダイレクトし/
ます。ルートがでない場合は/login
、ユーザーの役割を取得し、ルートを動的に生成replace
して、パターンでルートにアクセスします/xxx
。異常が発生した場合は、リセットしtoken
てルーターにアクセスしてください/login?redirect=/xxx
。
- ミドルエンドおよびバックエンドルーティングで一般的なルーティングシナリオの分析は、次のとおりです。
- 得られた
token
:
- にアクセスし
/login
、にリダイレクトします/
- にアクセスし
/login?redirect=/xxx
、にリダイレクトします/xxx
/login
直接アクセス以外のアクセスルート/xxx
- 取得できません
token
:
- アクセス
/login
、直接アクセス/login
- アクセス、実際のアクセスパス
/login
など以外のアクセスルートは、にリダイレクトされて署名します/dashboard
/login?redirect=%2Fdashboard
/dashboard
第二に、ルーティングと許可の検証の実現
- パーミッション.jsのグローバルナビゲーションガードrouter.beforeEachのコードは次のとおりです。
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')
Message.error(error || 'Has Error')
next(`/login?redirect=${
to.path}`)
NProgress.done()
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${
to.path}`)
NProgress.done()
}
}
})
- 完全なコードは次のとおりです。permission.js、完全なコードは次のとおりです。
import router from './router'
import store from './store'
import {
Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {
getToken } from '@/utils/auth'
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({
showSpinner: false })
const whiteList = ['/login', '/auth-redirect']
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')
Message.error(error || 'Has Error')
next(`/login?redirect=${
to.path}`)
NProgress.done()
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${
to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done()
})