vue登录拦截

本地环境安装路由插件vue-router：

cnpm install vue-router --save-dev

*没有安装淘宝镜像的可以将 cnpm 替换成 npm
安装淘宝镜像 :

npm install -g cnpm --registry=https://registry.npm.taobao.org

配置
两种配置方法：在main.js中 || 在src/router文件夹下的index.js中
在src/router/index.js中的
1.引入
import Vue from 'vue'
import Router from 'vue-router'
Router是自定义的名字，这里叫这个名字后，下边都要用到的
2.使用/注册
Vue.use(Router)
3.配置
首先在定义路由的时候就需要多添加一个自定义字段isLogin:true ，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，
否则就进入登录页面。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        isLogin:true    // 添加该字段，表示进入这个路由是需要登录的
      }//路由元
    },{
      path:"/login",
      name:"login",
      component:Login
    }
  ]
})

4.引入路由相对应的地址

import Home from "@/components/home"
import Login from "@/components/login

5在src/router中创建permission.js文件
引入:

import router from "./index.js"

在路由跳转之前我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

import router from "./index.js"
// 路由跳转之前
router.beforeEach((to,from,next)=>{
    // console.log(to)
    // to 表示将要跳转到的组件(目标组件)
    // console.log(from);//(源组件)
     
    // next 是一个函数
    // next()
    // next() 进入下一个组件的钩子函数
    // next(false)
    // next(false) 阻止跳转  中断导航
    // next("/login") 
    // next("/login") 进入指定的组件的钩子函数
    if(to.matched.some(res=>res.meta.isLogin)){//判断是否需要登录
        if (sessionStorage['username']) {
            next();
        }else{
            next({
                path:"/login",
                query:{
                   redirect:to.fullPath
                }
            });
        }
    }else{
        next();
    }
})
// 跳转之后
// router.afterEach()
export default router;

点击登录按钮判断用户是否存在

<template>
        <div id="login">
            <input type="text" v-model="username">
            <input type="text" v-model="password">
            <button @click="login">登录</button>
        </div>
    </template>
    <script>
        export default {
            data(){
                return {
                    username:"",
                    password:""
                }
            },
            mounted(){
                
            },
            methods:{
                login(){
                    sessionStorage['username'] = this.username;
                    sessionStorage['password'] =  this.password;
                    this.$router.push({path:this.$route.query.redirect});
                }
            }
        }
    </script>

最后编辑于：2019.05.14 21:33:15