vuex实现登录状态的存储,未登录状态不允许浏览的方法


Posted in Javascript onMarch 09, 2018

基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter。

导航守卫

正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。

完整的导航解析流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、调用全局的 beforeEach 守卫。

4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResolve 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

全局守卫

你可以使用 router.beforeEach注册一个全局前置守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

to: Route:即将要进入的目标 路由对象

from: Route:当前导航正要离开的路由

next: Function:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false):中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/')或者next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

next(error):(2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

路由独享的守卫

你可以在路由配置上直接定义beforeEnter守卫:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

还有其他部分守卫,详情可以看官方文档https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

安装vuex后

创建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  isLogin: 0
}
const mutations = {
  changeLogin(state,status){
    state.isLogin = status;
  }
}
const actions = {
  loginAction({commit}){
    commit('changeLogin',1);
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

login.vue中

引入import { mapActions,mapState } from 'vuex'

接着进行登录状态的改变,base_url就是路径

export default {
    name: 'Login',
    data(){
      return{
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
        showLogin: false
      }
    },
    mounted(){
      this.showLogin = true;
    },
    computed: {
      ...mapState(['isLogin'])
    },
    methods: {
      ...mapActions(['loginAction']),
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){
              console.log('验证通过');
              this.loginAction();
              this.$router.push('manage');
            }else{
              console.log('账号密码出错');
              // this.$message.error('账号密码出错');
              this.$message({
                type: 'error',
                message: '账号密码出错'
              });
            }
            console.log('请求地址: ' + base_url);
          }else{
            console.log('验证失败');
            return false;
          }
        })
      }
    }
  }

接下去只要使用路由守卫即可

beforeEach使用实例

router.beforeEach((to,from,next)=>{
  if(to.meta.check){
    var check = async function(){
      const result = await checkUser();
      if(result.status == 0){
        next();
      }else{
        alert('用户未登录');
        next({path: '/login'});
      }
    }
    check(); //后台验证session
  }else{
    next();
  }
})

beforeEnter使用实例

export default new Router({
  routes: [
    {
     path: '/login',
     component: Login
    },
    {
      path: '/manage',
      name: '',
      component: Manage,
      beforeEnter: (to,from,next)=> {  //导航守卫
      console.log(to)
      console.log(from)
      if(store.state.isLogin == 1){
       console.log('用户已经登录');
       next();
      }else{
       console.log('用户未登录');
       next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

以上这篇vuex实现登录状态的存储,未登录状态不允许浏览的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
详解react关于事件绑定this的四种方式
Mar 09 #Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
vue + vuex todolist的实现示例代码
Mar 09 #Javascript
vue实现在表格里,取每行的id的方法
Mar 09 #Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 #Javascript
vue的安装及element组件的安装方法
Mar 09 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
canvas知识总结
2017/01/25 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python五子棋游戏的设计与实现
2019/06/18 Python
Python ORM编程基础示例
2020/02/02 Python
财务副总经理工作职责
2013/11/25 职场文书
冬季安全检查方案
2014/05/23 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
买房协议书范本
2014/10/23 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
用php如何解决大文件分片上传问题
2021/07/07 PHP