实现未登录跳转回login页

问题：未登陆直接输入url：地址进入网站
vue项目实例：
一，设置router
1.首先配置路由
/src/router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',// 登录
   name: 'Login',
   component: resolve => require(['@/PACS/pages/Login'],resolve)
  },{
   path: '/home',
   name: 'Home',
   meta: {
    requireAuth: true, // 判断是否需要登录
   },
   component: resolve => require(['@/PACS/pages/Home'],resolve)
  } 
  ]
})
 ## 增加了字段 requireAuth 用来判断该路由是否需要登录

2.通过导航守卫钩子beforeEach进行登陆验证，另外这里如果用户登录成功之后，token会默认放在vuex中的getters中,所以在导航守卫中判断对应getters是否存在，如果存在，证明用户已登录，允许用户进入该路由。否则就跳转登陆页，登陆成功后直接跳转到该页面

// 路由判断登录 根据路由配置文件的参数
// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
  console.log('需要登录');
  if (!store.getters.getToken) { // 判断当前的token是否存在 ； 登录存入的token
   next({
    path: '/',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
   })
  }  else {
        let redirect='';
        //如果有参数，或导致to.path相同路径时，但不相等
        if(from.query.redirect){
           if(from.query.redirect.includes('?')){
              redirect=from.query.redirect.split('?')[0]
           }else{
              redirect=from.query.redirect;
           }
           if(to.path===redirect){   //防止无限循环
             next();
           }else{
                 next({path:from.query.redirect}); //跳转到目的路由
           }
        }
  }
 } else {
  next();
 }
});

遍历to.matched数组，是为了保正匹配到的所有路由信息，；所以只要给较高一级 的路由配置requiresAuth即可，其下的所有子路由不必添加。

二，存储token
用户通过网页表单提交用户名和密码，后台根据提交的数据生成token，前端调用vuex的changeLogin方法将后台返回的token数据保存到localstorage中，并更新store中state的Authorization。

login.vue

<template>
    <div class="login-wrap">
        <div class="ms-login">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px" class="ms-content">
                <el-form-item prop="loginName">
                    <el-input v-model="loginForm.loginName" placeholder="用户名">
                        <el-button slot="prepend" icon="icon-d-wo1"></el-button>
                    </el-input>
                </el-form-item>
 
                <el-form-item prop="password">
                    <el-input type="password"  v-model="loginForm.password" placeholder="密码">
                        <el-button slot="prepend" icon="icon-d-yuechi1"></el-button>
                    </el-input>
                </el-form-item>
 
                <div class="login-btn">
                    <el-button type="primary" @click="login">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
 
<script>
    import axios from 'axios'
    import { mapMutations } from 'vuex';
    export default {
        data: function(){
            return {
                loginForm: {
                    loginName: '',
                    password: ''
                },
                userToken:'',
                rules: {
                    loginName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            ...mapMutations(['changeLogin']),
            login(){
                if(this.loginForm.loginName === '' || this.loginForm.password === ''){
                    alert('账号或密码不能为空');
                }else{
                    axios({
                        method: 'post',
                        url: '/admin/login',
                        params:{
                            loginName: this.loginForm.loginName,
                            password: this.loginForm.password   
                        },
                        headers:{
                            'Content-type':'application/x-www-form-urlencoded'
                        }
                    }).then(res=>{
                        console.log(res.data);
                        this.$router.push('/home');
                       
                        this.userToken = window.btoa(res.data.data.token); //使用base64加密
                        
                        //将用户token保存到vuex中
                        this.changeLogin({Authorization: this.userToken });
                            
                    }).catch(error=>{
                        console.log(error)
                    })
                }
            }
        }
    }
</script>

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const store = new Vuex.Store({
 
  state: {
    // 存储token
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
 
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state, user) {  //这里的state对应上面状态state
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization);
    }
  },
  getters:{
    getToken:state=>{
    return state.Authorization
    }
  }
});
 
export default store