路由导航守卫(全局前置守卫)

在router/index.js中

导入和添加路由规则

登录页与后台页面

import Main from '../components/main.vue'
import Login from '../components/login.vue'
const router = new VueRouter({
    routes: [
        { path: '/main', component: Main },
        { path: '/Login', component: Login },
    ]
})

 

添加router.beforeEach(fn)

to 表示将要访问的路由信息对象 from 表示将要离开的路由信息对象 next()函数表示放行

这里走的是hash地址

// 为router实例对象，声明全局导航守卫
// 只要发生了路由的跳转，必然会触发beforeEach指定的function回调函数
router.beforeEach(function (to, from, next) {
    // to 表示将要访问的路由信息对象
    // from 表示将要离开的路由信息对象
    // next()函数表示放行
    // console.log(from);
    // console.log(to);
​
    // 路由导航守卫
    // 1.要拿到用户将要访问的hash地址
    //2.判断hash地址是否等于/main后台
    // 2.1如果等于/main，证明需要登录之后，才能访问成功
    // 2.2如果不等于/main，则不需要登录，直接放行next()
    //3.如果访问的地址是/main 则需要读取localStorage中的token值
    // 3.1如果有token 则放行
    // 3.3如果没有token，则强制跳转到/login登录页
    if (to.path == '/main') {
        const token = localStorage.getItem('token')
        if (token) {
            next('/main')
        } else {
            next('/login')
        }
    } else {
        next()
    }
})

模拟登陆退出

• 前置准备

router/index.js设定路由规则

导入Login与Home

import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'

const router = new VueRouter({
    // 登陆的路由规则
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
        // 后台主页的路由规则
        { path: '/home', component: Home }
    ]
})

 

• MyLogin.vue页面

因为没有后台数据，这里模拟账号密码

1. data中定义username和password

 data(){
    return{
      username:'',
      password:''
    }
  },

2.表单双向数据绑定

v-model

//登录
<div class="form-group form-inline">
          <label for="username">登录名称</label>
          <input
            type="text"
            class="form-control ml-2"
            id="username"
            placeholder="请输入登录名称"
            autocomplete="off"
            v-model.trim="username"
          />
        </div>
//密码
 <div class="form-group form-inline">
          <label for="password">登录密码</label>
          <input
            type="password"
            class="form-control ml-2"
            id="password"
            placeholder="请输入登录密码"
            v-model.trim="password"
          />
        </div>

3.重置按钮

template

<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>

methods

methods:{
    reset(){
      this.username ='',
      this.password = ''
    },
  }

4.登录按钮

template

 <button type="button" class="btn btn-primary" @click="login">登录</button>

methods

设定token值等登陆操作

 login(){
      if(this.username == 'admin' && this.password == '123456'){
        localStorage.setItem('token','Bearer xj')
        this.$router.push('/home')
      }else{
        localStorage.removeItem('token')
      }
    }

• index.js路由页

  1.设定导航守卫

  当登陆后会跳转到home页面，这里做token验证，成功放行，失败则返回login登陆页面

  router.beforeEach(function (to, from, next) {
      if (to.path == '/home') {
          const token = localStorage.getItem('token');
          if (token) {
              next()
          } else {
              next('/login')
          }
      } else {
          next();
      }
  })

• MyHeader.vue页面

1.退出功能

template

    <!-- 右侧按钮区域 -->
    <div class="layout-header-right">
      <button type="button" class="btn btn-light" @click="logout">退出登录</button>
    </div>

methods

清空token值，并跳转至登录页

  methods:{
    logout(){
      // 1.清空token
      localStorage.removeItem('token')
      // 2.跳转到登录页
      this.$router.push('/login')
    }
  }