搭建Vue從Vue-cli到router路由護衛

藤蔓繞竹發表於2019-11-11

別的不多說,開始動爪把,
首先安裝vue-cli mac: sudo npm install -g @vue/cli
github:
github.com/XinYueXiao/…

1、Vue-cli基礎使用

1.1 建立測試專案 vue create vue-routes

1.2 建立成功,啟動專案 yarn serve

在http://localhost:8080/就可以看到歡迎?頁面了

1.3 搞點自定義配置,新建vue.config.js

const title = '雙11剁手啦'
const port = '1111'
module.exports = {
    publicPath: '/wxy',
    //自定義埠號
    devServer: {
        port
    },
    //自定義變數
    configureWebpack: {
        name: title
    }
}複製程式碼

配置完成後重新啟動yarn serve效果圖

如何配置svg圖示

1）準備一個svg，例如：src/icons/svg/hg.svg

2）安裝loaderyarn add svg-sprite-loader

3）對config進行鏈式操作即可修改loader

const path = require('path')
//處理地址
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    ...,
    chainWebpack(config) {
        //安裝loader,對config進行鏈式操作即可修改loader、plugins
        //1.svg rule中要排除icons目錄
        config.module.rule('svg')
            //轉換為絕對地址
            .exclude.add(resolve('src/icons'))
            //檢視配置後svg規則 vue inspect --rule svg
        //2.新增一個規則icons
        config.module.rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons')).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    }
}複製程式碼

4）svg rule中要排除icons目錄後配置

5）新增一個規則icons配置

6）新建src/components/SvgIcon.vue模板

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
複製程式碼

7）新建src/icons/index.js 在main.js下引入icon

//src/icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
//圖示自動載入
const req = require.context('./svg', false, /\.svg$/)
req.keys().map(req)
Vue.component('svg-icon', SvgIcon)

//main.js
import "./icons";複製程式碼

8）在App.vue引入圖示

 <svg-icon icon-class="hg"></svg-icon>複製程式碼

效果如下：

2、router路由守衛

何為守衛，即為阻止無身份者進入組織內部
安裝yarn add vue-router 控制路由
安裝yarn add vuex 儲存身份認證

2.1 路由配置

src/router/index.js

import Vue from "vue";
import Router from "vue-router";
import Layout from '@/layout'; // 佈局頁
Vue.use(Router);
// 通用頁面:不需要守衛，可直接訪問 
export const constRoutes = [
    {
        path: "/login",
        component: () => import("@/views/Login"),
        hidden: true // 導航選單忽略該項
    }, {
        path: "/",
        component: Layout,// 應用佈局
        redirect: "/home",
        children: [
            {
                path: "home",
                component: () =>
                    import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
                name: "home",
                meta: {
                    title: "Home", // 導航選單項標題
                    icon: "hg" // 導航選單項圖示 
                }
            }]
    }];
// 許可權頁面:受保護頁面，要求使用者登入並擁有訪問許可權的角色才能訪問 
export const asyncRoutes = [
    {
        path: "/about",
        component: Layout,
        redirect: "/about/index",
        children: [
            {
                path: "index",
                component: () =>
                    import(/* webpackChunkName: "home" */ "@/views/About.vue"),
                name: "about",
                meta: {
                    title: "About",
                    icon: "hg",
                    roles: ['admin', 'editor']
                },
            }
        ]
    }
];
export default new Router({
    mode: "history",
    base: process.env.BASE_URL,
    routes: constRoutes
});

複製程式碼

佈局元件src/layout

<template>
  <div class="app-wrapper">
    <div class="main-container">
      <router-view />
    </div>
  </div>
</template>


複製程式碼

路由展示src/App.vue

<template>
  <div id="app">
    <!-- 路由 -->
    <div id="nav">
      <router-link to="/">
        <svg-icon icon-class="wx"></svg-icon>
        <!-- <svg>
          <use xlink:href="#icon-wx"></use>
        </svg>-->
        Home
      </router-link>|
      <router-link to="/about">
        <svg-icon icon-class="hg"></svg-icon>About
      </router-link>
    </div>
    <!-- 4.路由檢視 -->
    <!-- 問題：router-link和router-view是哪來的 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>



複製程式碼

2.2 準備頁面

src/views/About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
複製程式碼

src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "home",
  components: {
    HelloWorld
  }
};
</script>


複製程式碼

src/views/Login.vue

<template>
  <div>
    <h2>使用者登入</h2>
    <div>
      <input type="text" v-model="username" />
      <button @click="login">登入</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "admin"
    };
  },
  methods: {
    login() {
      this.$store
        .dispatch("user/login", { username: this.username })
        .then(() => {
          this.$router.push({
            path: this.$route.query.redirect || "/"
          });
        })
        .catch(error => {
          alert(error);
        });
    }
  }
};
</script>


複製程式碼

2.3 身份認證

import router from "./router";
import store from "./store";
const whiteList = ["/home", "/login"]; // 無需令牌白名單
// 全域性路由守衛
router.beforeEach(async (to, from, next) => {
    // 獲取令牌判斷使用者是否登入
    const hasToken = localStorage.getItem("token");

    // 已登入
    if (hasToken) {
        if (to.path === "/login") {
            // 若已登入沒有必要顯示登入頁，重定向至首頁
            next({ path: "/" });
        } else {
            // 去其他路由，暫時放過
            //   next()
            // 接下來執行使用者角色邏輯, todo
            //   1.判斷使用者是否擁有角色
            const hasRoles =
                store.state.user.roles && store.state.user.roles.length > 0;

            if (hasRoles) {
                next();
            } else {
                // 2.獲取使用者角色
                const roles = await store.dispatch("user/getInfo");

                const accessRoutes = await store.dispatch("permission/generateRoutes", roles);

                //   動態新增路由到路由器
                router.addRoutes(accessRoutes);

                // 跳轉
                next({ ...to });
            }
        }
    } else {
        // 未登入
        if (whiteList.indexOf(to.path) !== -1) {
            // 白名單中路由放過
            next();
        } else {
            // 重定向至登入頁
            next(`/login?redirect=${to.path}`);
        }
    }
});



複製程式碼

2.4 使用者資訊設定

import Vue from "vue";
import Vuex from "vuex";
import user from './modules/user'
import permission from './modules/permission'

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        user, permission
    }
});


複製程式碼

src/store/modules/user.js

const state = {
    token: localStorage.getItem("token"),
    // 其他使用者資訊
    roles: []
};

const mutations = {
    SET_TOKEN: (state, token) => {
        state.token = token;
    },
    SET_ROLES: (state, roles) => {
        state.roles = roles;
    },
};

const actions = {
    // 模擬使用者登入
    login({ commit }, userInfo) {
        const { username } = userInfo;
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (username === "admin" || username === "jerry") {
                    commit("SET_TOKEN", username);
                    localStorage.setItem("token", username);
                    resolve();
                } else {
                    reject("使用者名稱、密碼錯誤");
                }
            }, 1000);
        });
    },
    getInfo({ commit, state }) {
        return new Promise((resolve) => {
            setTimeout(() => {
                const roles = state.token === 'admin' ? ['admin'] : ['editor']
                commit('SET_ROLES', roles)
                resolve(roles)
            }, 1000);
        })
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};



複製程式碼

2.5 使用者路由許可權 src/store/modules/permission.js

// 匯入asyncRoutes，過濾它看當前使用者是否擁有響應許可權
import {asyncRoutes, constRoutes} from '@/router'

const state = {
    routes: [], // 完整路由
    addRoutes: [], // 許可權路由
}

const mutations = {
    // routes: 使用者可訪問的許可權路由
    SET_ROUTES: (state, routes) => {
        state.addRoutes = routes;
        state.routes = constRoutes.concat(routes);
    }
}

const actions = {
    generateRoutes({commit}, roles) {
        // 過濾出能訪問的路由表
        const routes = filterAsyncRoutes(asyncRoutes, roles)
        commit('SET_ROUTES', routes)
        return routes;
    }
}

function filterAsyncRoutes(routes, roles) {
    const res = [];

    routes.forEach(route => {
        // 複製一份路由
        const tmp = {...route};
        // 擁有訪問許可權
        if (hasPermission(roles, tmp)) {
            if (tmp.children) {
                // 遞迴子路由
                tmp.children = filterAsyncRoutes(tmp.children, roles)
            }

            res.push(tmp);
        }        
    })

    return res;
}

function hasPermission(roles, route) {
    if (route.meta && route.meta.roles) {
        return roles.some(role => route.meta.roles.includes(role))
    } else {
        // 路由定義中沒有roles選項，則不需要許可權即可訪問
        return true;
    }
}

export default {
    namespaced: true, 
    state,
    mutations,
    actions
}

複製程式碼

2.6 最終效果圖

vue--vue-router 元件對映到路由
2022-02-28
Vue元件路由
vue 路由vue Router
2020-12-28
Vue路由
vue-cli搭建
2019-03-21
Vue
Vue-cli 3.x搭建專案還要做什麼？之二【Vue Router】
2019-03-20
Vue
Vue從甜小白到皮大佬系列(七) Vue Router
2019-09-03
Vue
vue-router 巢狀路由
2018-12-19
Vue巢狀路由
vue-router路由基礎
2019-04-28
Vue路由
vue全家桶 ---vue-router路由篇
2018-12-29
Vue路由
總結Vue 第四天：vue-cli（Vue2.0 新手入門 — 從環境搭建到釋出）
2021-12-25
Vue
Java登陸第四十天——Router路由守衛
2024-04-07
Java路由
Vue-CLI 專案搭建
2022-04-18
Vue
一起學Vue：路由(vue-router)
2020-11-01
Vue路由
vue-router 原始碼：路由模式
2018-08-15
Vue原始碼路由模式
vue-router 原始碼：前端路由
2018-06-27
Vue原始碼前端路由
使用vue-cli搭建VUE專案
2018-08-07
Vue
Vue-Cli 3.0從0 開始搭建專案（篇1）
2019-05-04
Vue
Re:用webpack從零開始的vue-cli搭建'生活'
2022-07-16
WebVue
手把教你搭建SSR(vue/vue-cli + express)
2019-06-13
VueExpress
vue router路由自定義後退事件
2018-12-10
Vue路由事件
vue router 引入多個路由檔案
2019-02-27
Vue路由
vue-router控制路由許可權
2018-07-30
Vue路由
3 vite vue-router 路由巢狀
2024-08-07
ViteVue路由巢狀
Vue Router 4與路由管理實戰
2024-06-07
Vue路由
vue-router路由之路-極簡教程
2022-12-15
Vue路由
vue筆記-6 vue中router路由路由引數的傳遞巢狀路由
2020-10-09
Vue筆記路由巢狀
vue2.0 實現路由守衛
2020-09-29
Vue路由
Vue | 路由守衛面試常考
2021-07-14
Vue路由面試
vue--前端路由及vue-router兩種模式
2022-03-04
Vue前端路由模式
webpack4+Vue搭建自己的Vue-cli
2018-08-29
WebVue
搭建Vue2.0腳手架（vue-cli）
2018-05-21
Vue
基於vue-cli構建vue-router的入門級demo
2019-03-18
Vue
手撕Vue-Router-提取路由資訊
2023-11-20
Vue路由
03、Promise,Vue-cli搭建專案
2019-01-27
PromiseVue
Vue-Cli 專案基礎搭建
2019-05-06
Vue
「基礎搭建」從零開始，基於 Webpack5 搭建一個 Vue-Cli
2022-03-16
WebVue
Vue.js 2.x筆記：路由Vue Router（6）
2018-06-13
Vue.js筆記路由
vue2進階篇：vue-router之命名路由
2024-10-13
Vue路由
Vue總結第五天：vue-router （使用模組化（建立Vue元件）機制程式設計）、router-link 標籤的屬性、路由程式碼跳轉、懶載入、路由巢狀（子路由）、路由傳遞資料、導航守衛）
2021-12-26
Vue元件程式設計路由巢狀