vue-router结合vuex实现用户权限控制功能


Posted in Javascript onNovember 14, 2019

为了实现前端校验用户,后端需要在用户登录的时候记录下该用户的状态并加密之后返回给前端。之后该用户的所有请求都应该附带这个加密后的状态,后端取到这个状态解密,并与之前保存的状态对比,以此来判断该用户是否登录或合法。

我这里使用了node简单了写了个本地的express服务,来实现上述功能。完整的代码直接贴出来:

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const app = express();
// secret是后端加密的密钥
const secret = 'rhwl';
app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*');
 res.header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT');
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
 if (req.method.toLowerCase() === 'options') {
  return res.end();
 }
 next();
});
app.use(bodyParser.json());
app.post('/login', (req, res) => {
 const { username } = req.body;
 if (username === 'admin') { // 如果是合法用户,使用jwt进行加密生成token
  res.json({
   code: 0,
   username: 'admin',
   token: jwt.sign({ username: 'admin' }, secret, {
    expiresIn: 20,
   }),
  });
 } else {
  res.json({
   code: 1,
   data: '用户名不存在',
  });
 }
});
app.get('/validate', (req, res) => {
 const token = req.headers.authorization; // 在请求头中附带token信息
 jwt.verify(token, secret, (err, decode) => { // 验证token是否合法
  if (err) {
   return res.json({
    code: 1,
    data: '当前token无效',
   });
  }
  // 如果验证合法,重新生成新的token,并返回信息
  res.json({
   username: decode.username,
   code: 0,
   token: jwt.sign({ username: 'admin' }, secret, {
    expiresIn: 20,
   }),
  });
 });
});
app.listen(3000, ()=>{
  console.log('服务器在3000端口运行');
});

2.项目中axios封装

然后我们在项目中封装符合自己需求的ajax请求,现在通常都是基于axios库。在自己封装的ajax插件中,要在每次的请求头中添加上token。代码实现:

// ajaxResquest.js
import axios from 'axios';
class ajaxResquest {
  constructor(){
    // 根据当前模式自动切换baseURL
    this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/';
    this.timeout = 5000; // 设置请求超时为5s
  }
  request(config){
    const instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout,
    });
    instance.interceptor.request.use((config) => {
      // 将保存在本地的token添加到每次请求的请求头中
      // 这样就可以实现在请求时顺带附加用户的校验信息的需求
      config.headers.Authorization = localStorage.getItem('token');
      return config;
    }, (err) => {
      return Promise.reject(err);
    });
    instance.interceptor.response.use((req,res) => {
      return req.data;
    }, (err) => {
      Promise.reject(err);
    });
    // 将使用request时候需要的参数也添加到instance中
    return instance(config);
  }
}
export default new ajaxRequest();

然后统一管理项目api接口:

// api.js
import ajax from 'ajaxResquest';
export const userLogin = (username) => ajax.request({url: '/login', method: 'POST', data: {
  username,
}});
export const userValidate = () => ajax.request({url: '/validate'});

接下来我们在项目中具体实现用户登陆和权限校验的需求。

3.vuex记录用户登录

先将登陆组件配合vuex使用来触发用户登陆的行为,并且将用户登录之后的信息保存在vuex中,登陆组件的代码:

// userLogin component
<template>
  <div>
    <el-input style="width:200px" v-model="username"></el-input>
    <el-button @click="login">登录</el-button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      username: '',
    }
  },
  methods: {
    login(){
      // 这里触发vuex中的actions,在vuex中调用用户登陆接口
      // 从而将用户登陆之后的状态保存至vuex中
      this.$store.dispatch('login', this.username).then((data) => {
        // 登陆成功之后,路由跳转至用户账户页或者进行你需要的操作
        this.$router.push('/profile');
      });
    }
  }
}
</script>

接着是vuex的store.js

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import {userLogin, userValidate} from 'api.js';
Vue.use(Vuex);
export default Vuex.store({
  state: {
    username: '', 
  },
  mutations: {
    setUsername(state, username){
      state.username = username;
    }
  },
  actions: {
    async login({commit}, username){
      const res = await userLogin(username);
      if (res.code === 1) { // 登录失败
        return Promise.reject(res);
      }
      // 登录成功后将接口返回的token保存在本地
      localStorage.setItem('token', res.token);
      // 将用户名保存在vuex中
      commit('setUsername', username);
    }
  }
});

经过上面的操作,我们将用户登录中调用登录接口的操作通过vuex实现,将成功登录后的用户名保存在vuex中,此时的token保存在浏览器本地。但是vuex中的数据并不是持久数据,刷新之后保存的用户名就会消失,接下来我们实现刷新页面或者路由跳转时进行用户校验,如果验证通过则会生成新的token和username并保存。

4.vuex配合vue-router实现登录校验

当用户刷新页面时,或者点击其他页面切换路由router时,需要调用后端的validate接口,该接口通过验证已保存的token校验当前用户是否合法。我们在vuex的store.js中添加以下代码:

export default Vuex.store({
  state: {
    username: '',
  },
  mutations: {
    setUsername(state, username){
      state.username = username;
    } 
  },
  actions: {
    async login({commit}, username){
      ...
    },
    async validate({commit}) {
      // 调用userValidate时,会将
      const res = await userValidate();
      if (res.code === 1) { // 此时用户校验失败
        return Promise.reject(res);
      }
      // 如果校验成功,重新保存token和username 
      localStorage.setItem('token', res.token);
      commit('setUsername', res.username);
    }
  }
});

基本上我们通过上面的代码就实现了用户权限控制所需要的所有前提操作:

  • 用户成功登陆在本地保存token
  • 在自己封装的ajax的请求头部添加保存的token信息
  • 后端服务提供对前端token的校验能力

那么接下来就就是路由router刷新或改变的时候如何进行权限控制了。

5.vue-router钩子实现用户权限控制

使用过vue-router的同学们都知道,路有也是有钩子函数的,在官方文档里面被称为 导航守卫 。导航守卫允许我们可以精准的在每个路由变化的时候进行操作,我们就这里判断用户权限。在vue项目的的main.js中修改:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 在这里使用路由的导航守卫进行权限控制
// 可以自定义不需要校验用户的路由白名单
const whiteList = ['/'];
router.beforeEach(async (to, from, next) => {
  // 要去的页面是白名单,直接跳转
  if (whiteList.includes(to.path)) {
    next();
  }
  // 不是白名单,调用vuex中的validate行为
  const flag = await store.dispatch('validate');
  if (flag) { // 用户校验通过,直接跳转
    next();
  } else { // 用户校验失败
    next('/login'); // 跳转至用户登陆页
    // 顺带说一下,这里还可以在router中的meta属性中添加isNeeded: true/false
    // 然后配合这个属性更加精细的控制未通过用户校验时的页面是否允许跳转
  }
});
// vuex
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

总结

以上所述是小编给大家介绍的vue-router结合vuex实现用户权限控制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
JavaScript 继承详解(二)
Jul 13 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue router 传参获取不到的解决方式
Nov 13 #Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 #Javascript
vue props对象validator自定义函数实例
Nov 13 #Javascript
微信小程序获取当前位置和城市名
Nov 13 #Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 #Javascript
微信小程序wx.request的简单封装
Nov 13 #Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 #Javascript
You might like
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
vue实现轮播图帧率播放
2021/01/26 Vue.js
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
如何解决python多种版本冲突问题
2020/10/13 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
yy结婚证婚词
2014/01/10 职场文书
领导检查欢迎词
2014/01/14 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
村党支部书记承诺书
2014/05/29 职场文书
企业标语大全
2014/07/01 职场文书
公司证明怎么写
2014/09/22 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
八年级语文教学反思
2016/03/03 职场文书
二年级作文之动物作文
2019/11/13 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
PyTorch中的torch.cat简单介绍
2022/03/17 Python