vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能

// 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進(jìn)行加密生成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; // 在請(qǐng)求頭中附帶token信息
 jwt.verify(token, secret, (err, decode) => { // 驗(yàn)證token是否合法
  if (err) {
   return res.json({
    code: 1,
    data: '當(dāng)前token無效',
   });
  }
  // 如果驗(yàn)證合法，重新生成新的token，并返回信息
  res.json({
   username: decode.username,
   code: 0,
   token: jwt.sign({ username: 'admin' }, secret, {
    expiresIn: 20,
   }),
  });
 });
});
app.listen(3000, ()=>{
  console.log('服務(wù)器在3000端口運(yùn)行');
});

// ajaxResquest.js
import axios from 'axios';
class ajaxResquest {
  constructor(){
    // 根據(jù)當(dāng)前模式自動(dòng)切換baseURL
    this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/';
    this.timeout = 5000; // 設(shè)置請(qǐng)求超時(shí)為5s
  }
  request(config){
    const instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout,
    });
    instance.interceptor.request.use((config) => {
      // 將保存在本地的token添加到每次請(qǐng)求的請(qǐng)求頭中
      // 這樣就可以實(shí)現(xiàn)在請(qǐng)求時(shí)順帶附加用戶的校驗(yàn)信息的需求
      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時(shí)候需要的參數(shù)也添加到instance中
    return instance(config);
  }
}
export default new ajaxRequest();

// 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'});

// userLogin component
<template>
  <div>
    <el-input  v-model="username"></el-input>
    <el-button @click="login">登錄</el-button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      username: '',
    }
  },
  methods: {
    login(){
      // 這里觸發(fā)vuex中的actions，在vuex中調(diào)用用戶登陸接口
      // 從而將用戶登陸之后的狀態(tài)保存至vuex中
      this.$store.dispatch('login', this.username).then((data) => {
        // 登陸成功之后，路由跳轉(zhuǎn)至用戶賬戶頁或者進(jìn)行你需要的操作
        this.$router.push('/profile');
      });
    }
  }
}
</script>

// 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);
    }
  }
});

export default Vuex.store({
  state: {
    username: '',
  },
  mutations: {
    setUsername(state, username){
      state.username = username;
    } 
  },
  actions: {
    async login({commit}, username){
      ...
    },
    async validate({commit}) {
      // 調(diào)用userValidate時(shí)，會(huì)將
      const res = await userValidate();
      if (res.code === 1) { // 此時(shí)用戶校驗(yàn)失敗
        return Promise.reject(res);
      }
      // 如果校驗(yàn)成功，重新保存token和username 
      localStorage.setItem('token', res.token);
      commit('setUsername', res.username);
    }
  }
});

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';
// 在這里使用路由的導(dǎo)航守衛(wèi)進(jìn)行權(quán)限控制
// 可以自定義不需要校驗(yàn)用戶的路由白名單
const whiteList = ['/'];
router.beforeEach(async (to, from, next) => {
  // 要去的頁面是白名單，直接跳轉(zhuǎn)
  if (whiteList.includes(to.path)) {
    next();
  }
  // 不是白名單，調(diào)用vuex中的validate行為
  const flag = await store.dispatch('validate');
  if (flag) { // 用戶校驗(yàn)通過，直接跳轉(zhuǎn)
    next();
  } else { // 用戶校驗(yàn)失敗
    next('/login'); // 跳轉(zhuǎn)至用戶登陸頁
    // 順帶說一下，這里還可以在router中的meta屬性中添加isNeeded: true/false
    // 然后配合這個(gè)屬性更加精細(xì)的控制未通過用戶校驗(yàn)時(shí)的頁面是否允許跳轉(zhuǎn)
  }
});
// vuex
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');