文章首发于：clawhub.club

Vue Router

导航守卫

前置：
1
2
3
4
5
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
后置：
1
2
3
router.afterEach((to, from) => {
  // ...
})
我的使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式

const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (store.getters.token) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      next()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // 结束Progress
})

登陆主要用了Element-UI的相关组件，登陆数据操作使用了Vuex。
文档地址：https://vuex.vuejs.org/zh/guide/，简单的说就是管理数据的仓库。我也是简单的借鉴别人的。关于Vuex在文档上写的很清楚。

借鉴的大神项目地址：https://github.com/PanJiaChen/electron-vue-admin

目前项目打开后会进入登陆页面：
fa6a3f31a8022c13160a848eeacce40.png

点击登陆后进入主页面：
b1e237a7ef28d42461f246572ca26d2.png

真是丑爆了！！！慢慢学吧。