Vue练手项目(四):登录页

一.在main.js使用导航守卫(router.beforeEach)进行身份验证

导航守卫相关介绍
添加代码如下:

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = sessionStorage.getItem('user');
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

上述代码主要是进行一个登录状态的验证,如果当前的用户未进行登录,将会被转接至登录页

整段main.js代码如图

二.在components文件夹下新建一个Login.vue文件,如下图:

新建Login.vue

Login.vue的代码如下:

三.运行

打开cmd , cd 到本项目的根目录下 , 执行**npm run dev **
我是在git bash中打开的 , 效果一样的.

git bash 运行结果

打开浏览器,输入localhost:8686,查看运行效果

运行效果如图

github项目最近更改了 , 晚点再重新发布上去

In order to be irreplaceable , one must always be different.
要做到不可替代 , 就要与众不同.