使用vue-router+vuex進行導航守衛(轉)

前言：想要實現登錄后才能進入主頁等其他頁面，不然都會跳轉到登錄頁。但是Vuex有個不夠完美的地方，一旦刷新頁面就會沒了，所以還要用到localStorage。

一、router.js:

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import store from '../store/index' Vue.use(Router); // 懶加載組件 const login = () => import('Components/common/login/index.vue'); const loading = () => import('Components/common/loading/index.vue'); const home = () => import('Pages/home/home.vue'); const user = () => import('Pages/userManage/index.vue'); const addUser = () => import('Pages/userManage/add/index.vue'); const editUser = () => import('Pages/userManage/edit/index.vue'); const menu = () => import('Pages/menuManage/index.vue'); const umbrella = () => import('Pages/umbrellaManage/index.vue'); const location = () => import('Pages/locationManage/index.vue'); const order = () => import('Pages/orderManage/index.vue'); const test = () => import('Pages/test.vue'); const routes = [ // 登錄頁面 { path: '/login', name: "login", component: login, meta: { requiresAuth: false } }, { path: '*', redirect: '/home', name: 'HelloWorld', component: HelloWorld, children: [ // 測試頁面 { path: '/test', component: test, meta: { requiresAuth: true } }, // loading頁面 { path: '/loading', name: "loading", component: loading, meta: { requiresAuth: true } }, // 主頁 { path: '/home', component: home, meta: { requiresAuth: true } }, // 用戶管理 { path: '/user', component: user, meta: { requiresAuth: true } }, { path: '/user/add', name: 'addUser', component: addUser, meta: { requiresAuth: true } }, { path: '/user/edit', name: 'editUser', component: editUser, meta: { requiresAuth: true } }, // 菜單管理 { path: '/menu', name: 'menu', component: menu, meta: { requiresAuth: true } }, // 雨傘管理 { path: '/umbrella', name: 'umbrella', component: umbrella, meta: { requiresAuth: true } }, // 租借點管理 { path: '/location', name: 'location', component: location, meta: { requiresAuth: true } }, // 訂單管理 { path: '/order', name: 'order', component: order, meta: { requiresAuth: true } }, ] } ]; // 頁面刷新時，重新賦值有沒登錄 if (window.localStorage.getItem('isLogin')) { store.commit('setIsLogin', window.localStorage.getItem('isLogin')); } const router = new Router({ routes }); router.beforeEach((to, from, next) => { if (to.matched.some(r => r.meta.requiresAuth)) { // 判斷該路由是否需要登錄權限 console.log(store.getters.isLogin); if (store.getters.isLogin) { // 通過vuex 如果當前有登錄 next(); } else { console.log("沒有登錄吖") next({ path: '/login', query: {redirect: to.fullPath} }) } } else { next(); } }); export default router; 

這里有四個需要重點關注的地方（引入和使用就不納入其中了）：

1.單獨一個routes數組用來存放路由變量，然后每一個路由對象都需要有個meta參數，里面有個requiresAuth（也可以命其他名），這個就是用來判斷這個頁面需不需要判斷權限，所以login頁面為false，其他頁面都為true。

 

2.new一個router對象，剛剛在注意點1的數組作為參數，然后最后導出這個router對象給其他頁面引用。
3.要有一個判斷頁面刷新，重新賦值有沒登錄。這個時候判斷localStorage中的isLogin，如果為true，所以刷新前是有登錄的，則提交觸發vuex更改狀態。
4.vue-router提供的鈎子函數，在路由更換的時候，都會觸發這個函數，這個時候就要用到注意點1的meta.requiresAuth，如果即將要進入的頁面需要判斷登錄權限，檢測vuex的isLogin，為true就可以進去，不然都跳轉到登錄頁面。

二、Vuex

 

文件位置

modules/login.js

const login = { state: { // true為已經登錄，false為沒登錄 isLogin: false }, mutations: { setIsLogin(state, isLogin) { state.isLogin = isLogin; } }, actions: { }, } export default login; 

getters.js

const getters = { isCollapse: state => state.nav.isCollapse, isLogin: state => state.login.isLogin }; export default getters 

index.js

import Vue from 'vue'; import Vuex from 'vuex'; import nav from './modules/nav' import login from './modules/login' // import app from './modules/app'; // import user from './modules/user'; // import menu from './modules/menu'; import getters from './getters'; Vue.use(Vuex); const store = new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', modules: { nav, login // app, // user, // menu }, getters }); export default store 

三、實際使用-->登錄

handleSubmit() {
        this.$refs["loginForm"].validate((valid) => { if (valid) { if(this.loginForm.userName === "admin" && this.loginForm.password === "admin") { this.$notify({ title: '恭喜你', message: '登錄成功!', type: 'success' }); // 觸發setIsLogin方法改變vuex中isLogin的值， this.$store.commit('setIsLogin', true); // 改變localStorage中isLogin的值， window.localStorage.setItem('isLogin', true); // Cookies.set('Token', response.data.token) this.$router.push({path: '/home'}); } else { this.$message({ message: '登錄失敗：密碼錯誤!', type: 'warning' }); } } else { console.log('error submit!!'); return false; } }); }, 

四、實際使用-->退出登錄

handleCommand(command) {
        if(command === "exit") { // 觸發setIsLogin方法改變vuex中isLogin的值， this.$store.commit('setIsLogin', false); // 改變localStorage中isLogin的值， window.localStorage.setItem('isLogin', false); this.$notify({ title: '退出登錄成功', message: '請重新登錄', type: 'success' }); this.$router.push({path: '/login'}); } } 

<el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 歡迎你,{{name}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="exit">退出登錄</el-dropdown-item> </el-dropdown-menu> </el-dropdown>

作者：Lia代碼豬崽
鏈接：https://www.jianshu.com/p/f920b0e994dc
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。