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

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

10年积累的网站建设、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有黄冈免费网站建设让你可以放心的选择与我们合作。

我这里使用了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端口运行');
});

分享名称：vue-router结合vuex实现用户权限控制功能-创新互联
网站URL：https://www.cdcxhl.com/article20/esijo.html

成都网站建设公司_创新互联，为您提供手机网站建设、网站设计、品牌网站建设、外贸网站建设、App开发、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联