搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)

更新時間：2019年11月14日 10:53:25 作者：藤蔓繞竹

這篇文章主要介紹了搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

別的不多說,開始動爪把,

首先安裝vue-cli mac: sudo npm install -g @vue/cli

github:

https://github.com/XinYueXiao/vue-routes

1、Vue-cli基礎使用

1.1 創(chuàng)建測試項目 vue create vue-routes

1.2 創(chuàng)建成功,啟動項目 yarn serve

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

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）安裝loader yarn 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')
      //轉(zhuǎn)換為絕對地址
      .exclude.add(resolve('src/icons'))
      //查看配置后svg規(guī)則 vue inspect --rule svg
    //2.添加一個規(guī)則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）添加一個規(guī)則icons配置

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

<template>
 <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
  <use :xlink:href="iconName" rel="external nofollow" />
 </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路由守衛(wèi)

何為守衛(wèi)，即為阻止無身份者進入組織內(nèi)部

安裝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);
// 通用頁面:不需要守衛(wèi)，可直接訪問 
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" // 導航菜單項圖標 
        }
      }]
  }];
// 權(quán)限頁面:受保護頁面，要求用戶登錄并擁有訪問權(quán)限的角色才能訪問 
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" rel="external nofollow" ></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"]; // 無需令牌白名單
// 全局路由守衛(wèi)
router.beforeEach(async (to, from, next) => {
  // 獲取令牌判斷用戶是否登錄
  const hasToken = localStorage.getItem("token");

  // 已登錄
  if (hasToken) {
    if (to.path === "/login") {
      // 若已登錄沒有必要顯示登錄頁，重定向至首頁
      next({ path: "/" });
    } else {
      // 去其他路由，暫時放過
      //  next()
      // 接下來執(zhí)行用戶角色邏輯, 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);

        //  動態(tài)添加路由到路由器
        router.addRoutes(accessRoutes);

        // 跳轉(zhuǎn)
        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 用戶路由權(quán)限 src/store/modules/permission.js

// 導入asyncRoutes，過濾它看當前用戶是否擁有響應權(quán)限
import {asyncRoutes, constRoutes} from '@/router'

const state = {
  routes: [], // 完整路由
  addRoutes: [], // 權(quán)限路由
}

const mutations = {
  // routes: 用戶可訪問的權(quán)限路由
  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};
    // 擁有訪問權(quán)限
    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選項，則不需要權(quán)限即可訪問
    return true;
  }
}

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

2.6 最終效果圖