vue-router结合结合vuex实现用户权限控制功能实现用户权限控制功能
主要介绍了vue-router结合vuex实现用户权限控制功能，本文给大家介绍的非常详细，具有一定的参考借鉴价
值,需要的朋友可以参考下
为了实现前端校验用户，后端需要在用户登录的时候记录下该用户的状态并加密之后返回给前端。之后该用户的所有请求都应
该附带这个加密后的状态，后端取到这个状态解密，并与之前保存的状态对比，以此来判断该用户是否登录或合法。
我这里使用了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' : '/';
资源评论
