ここの写真は、この先生のプロジェクトのスクリーンショットです.
誰もが使いやすいように、各写真の下にコードをそのまま入力します.
以下を src/uitls/permission.js に追加します
このコード セクションでは、次のように説明しています:
パラメーター 1: バックグラウンドからのルート
パラメーター 2: すべてのフロントエンド ルートは、
最初にすべてのフロントエンド ルートを横断し、次にその中のバックグラウンド ルートを横断し続け、ユーザーが許可を持っているかどうかを判断しますあるキーワードが同じかどうか（ここでは教師がタイトルのキーワードを使用）によって、同じキーワードの理論を直接追加できますが、2 次または 3 次のサブコンテンツの存在を考慮して、ここでは教師が再帰的に作成しました。プロセス、つまり、現在の要素に children 属性がある場合は、現在の要素の children 属性が再帰的に処理され、最終的に返される値は現在の権限でアクセスできる値になります。
次の内容は上の図と一致しており、簡単にコピーして使用できます
/**
* 参数1:后台传来的关键字数组,参数二:全部路由数据
*/
export function comparation(userRouter=[],allRouter=[]){
let realRouter = []
allRouter.forEach(item=>{
userRouter.forEach(v=>{
if(item.meta,title===v.title){
//注意children
if(item.children && item.children.length>0){
item.children=comparation(v.children,item.children)
}
realRouter.push(item)
}
})
})
return realRouter
}
このコードはvuexで書かれており、基本的にコメントがあります
コードの説明: このコード ティーチャーは、ルーティング コレクション データを定義します。これは、ページに表示する必要がある実際のデータです (ここで、ティーチャーはナビゲーション メニューも使用しますが、私は使用しません。ルーティングによって直接生成されたメニューです。バックグラウンドから渡されたデータまたはフロントデスクで定義されたルーティングテーブルは人によって異なります。これは主に権限管理の考え方を理解するためのものです)、中間の突然変異はルーティングテーブルとメニューの設定と非表示を定義します。アクションのメソッドは実際のコアであり、現在のユーザーの役割リクエストを送信し、すぐ上のモジュールで定義されたメソッドを導入してユーザーの権限を設定し、最後に vuex とルーティングに追加します
上の 2 つの図は結合されていますが、
次の内容は上の 2 つの図と一致しており、コピーして使用するのに便利です。
import {
comparsion } from "@/uitl/comparsion";
export default {
namespaced: true,
state: {
routerList: null, //真正的路由
sideBar: [], //导航菜单
},
mutations: {
set_routerList(state, data) {
state.realRouter = data;
},
clear_routerList(state, data) {
state.realRouter = null;
},
set_sideBar(state, data) {
state.sideBar = data;
},
clear_sideBar(state, data) {
state.sideBar = [];
},
},
actions: {
async gat_routers({
commit }, data) {
//获取比对路由
let routers = await login("/login", {
username: "admin" }).then((res) => {
return res.data.router;
});
//导航菜单
commit("set_sideBar", routers[0].children);
// 比对路由(参数一是上面后台返回的关键字数组,参数二是所有路由,需要导入)
let realRouter = comparation(routers, allRouter);
console.log(realRouter);
// 存储到vuex
commit("set_routerList", realRouter);
// 动态添加路由
router.addRoutes(realRouter); //这是vue2写法,vue3版本的router4版本没有addRoutes,只有addRoute
//以下是我本人的写法(vue-router4版本只能通过循环一个一个加)
// realRouter.forEach((item) => {
// router.addRoute(item);
// });
},
},
};
ここで先生は前衛です
コードの説明:
ルートがジャンプするたびにロール ID を取得する (これは個人的にはお勧めしません。1: ルートが変更されるたびにリクエストを取得してルーティング テーブルを追加するのが面倒であるなど、ルーティングの親にいる(セクション 1 レベルのルーティング) onMonend ライフサイクルが call に設定されている)
次の内容は上の図と一致しており、簡単にコピーして使用できます
router.beforeEach((to, from, next) => {
if(!getToken()){
//没有登录
if(to.meta.token){
//需要登录
next({
path:"/login"
})
}else{
next()
}
}else{
//登录
//判断权限
if(!store.state.permission.routerList){
//没有路由
//获取路由
store.dispatch('permission/gat_routers').then(()=>{
console.log(1000);
next()
})
}
}
})
これが先生のビデオチュートリアルです.リンクしたビデオの後半を見るだけでいいです.前は役に立たず、後半はコアです.
遭遇したバグ
ルーティング フロント ガードにルートを動的に追加し、ルーティング ページを更新すると、空白でページが見つからないということは、ルートが追加される前に既にルートにアクセスされていることを意味します.同時に、公式ドキュメントを参照した後、コードにヒントがあり、
router.addRoute トリガーは、動的メニュー情報 (vuex) がルート ナビゲーション ガードに現在保存されていないことを検出することです。あとは、next()で解放し、公式プロンプトやコンソール関連の印刷情報によると、addRouterがルートを追加する前にwarnプロンプトが出てくることがわかるので、next()をnext(to)に変更してトリガーするのが解決策新しいもの ナビゲーション、この時点で、動的ルートの対応するアドレスを正しく一致させることができます。この next(to) は、ルートを追加する vuex メソッドの後に配置されます
store.dispatch('permission/gat_routers').then(()=>{
console.log(1000);
next(to) //这样可解决白屏问题
})